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

Question

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

我dialog只有在满足以下条件时才应显示private.userCanManageUsers && private.pendingUsers.length > 0 && private.pendingDialogVisible

我试图在这里使用新的属性visible.sync 文档

如果条件仅包含一个条件但不适用于多个条件，则该命令起作用。

工作中

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

不工作

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

1. 在多个条件下使用el-dialogwith 的解决方案是什么visible.sync？
2. 如果这是不可能的，我应该怎么做才能使其起作用？

Answer 1

该问题是由对sync实际操作的误解引起的。

在Vue 2.3中（与Vue 1x不同），sync无非就是为了简化双向绑定的事件注册。根据文档：

在2.3中，我们为道具重新引入了.sync修饰符，但这一次只是语法糖自动扩展为附加的v-on侦听器：

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

扩展为：

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

用外行的话来说是什么意思？由于它促进双向绑定来更新要同步的值，因此不能使用多个属性（作为布尔表达式），也不能使用方法的返回值，因为必须同时读取和写入相同的值。

简而言之，不，您无法sync以当前使用的方式完成使用，而且我个人不同意该库选择的实现，因为它不是特别清楚，会导致复杂的解决方法。

也就是说，您可以使用单个属性来绑定的可见性，:visible.sync并可以在以下示例中根据状态触发该可见性：

模板：

<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')

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