javascript - Vuejs 2.3 - 同步和元素 Ui 对话框

Question

我正在使用 Element UI，自从 Vue.js 2.3 发布以来，情况发生了变化

我有一个对话框，只有在满足以下条件时才会显示 private.userCanManageUsers && private.pendingUsers.length > 0 && private.pendingDialogVisible

我正在尝试使用新属性 visible.sync documentation here

如果条件仅包含一个条件但不适用于多个条件，则它有效。

工作

<el-dialog
       :visible.sync="private.pendingDialogVisible"                 
</el-dialog>

不工作

<el-dialog
       :visible.sync="private.userCanManageUsers && private.pendingUsers.length > 0 && private.pendingDialogVisible"           
    </el-dialog>

1. 将 el-dialog 与 visible.sync 结合使用的解决方案是什么几个条件？
2. 如果这是不可能的，我应该怎么做才能让它发挥作用？

Answer 1

这个问题是由于对什么的误解造成的sync实际上是在做。

在 Vue 2.3 中(与 Vue 1x 不同)，sync无非就是一个事件注册，方便双向绑定(bind)。根据 documentation :

In 2.3 we re-introduced the .sync modifier for props, but this time itis just syntax sugar that automatically expands into an additionalv-on listener:The following

<comp :foo.sync="bar"></comp>

is expanded into:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

通俗地说，这是什么意思？由于它促进了双向绑定(bind)以更新正在同步的值，因此您不能使用多个属性(作为 bool 表达式)，也不能使用方法的返回值，因为您必须 读取和写入相同的值。

简而言之，不，您无法使用 sync 完成以您目前使用它的方式，我个人不同意图书馆选择的实现方式，因为它不是特别清楚并且强制采用复杂的解决方法。

也就是说，您可以使用单个属性来绑定(bind) :visible.sync 的可见性你可以根据你的状态触发它in the following example :

模板:

<div id="app">
  <el-dialog title="Shipping address" :visible.sync="showDialog" 
    :before-close="beforeCloseHandler"
    @close="cond1 = true; cond2 = false;">
  </el-dialog>
  <button @click="cond1 = true; cond2 = false; showDialog = true;">Open Dialog</button>
</div>

Javascript:

var Main = {
    data() {
      return {
        showDialog: true,
        cond1: true,
        cond2: true,
      };
    },
    methods: {
      beforeCloseHandler: function (done) {
        if (this.cond1 && this.cond2) {
            console.log('hit close');
            done();
        } else {
            console.log('rejected close');
        }
      }
    }
  };
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

我们可以将显示绑定(bind)到单个属性，我们可以使用 :before-close 控制关闭处理程序，当然我们可以通过按钮上的单击事件来控制我们的显示条件。它并不完美，但它是一种潜在的解决方法。