I'm using Element UI and things have changed since the release of Vue.js 2.3

I have a dialog that should be displayed only if the following condition is met private.userCanManageUsers && private.pendingUsers.length > 0 && private.pendingDialogVisible

I'm trying to use the new attribute visible.sync documentation here

It is working if the condition contains only one condition but does not work with several.

Working

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

Not working

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

1. What is the solution to use the el-dialog with visible.sync with several condition?
2. If this is impossible what should I do to make it work ?

I'm using Element UI and things have changed since the release of Vue.js 2.3

I have a dialog that should be displayed only if the following condition is met private.userCanManageUsers && private.pendingUsers.length > 0 && private.pendingDialogVisible

I'm trying to use the new attribute visible.sync documentation here

It is working if the condition contains only one condition but does not work with several.

Working

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

Not working

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

1. What is the solution to use the el-dialog with visible.sync with several condition?
2. If this is impossible what should I do to make it work ?

• javascript
• vue.js
• vuejs2

Share Improve this question Follow edited Jun 20, 2020 at 9:12 CommunityBot 111 silver badge asked May 10, 2017 at 3:52 Léo CocoLéo Coco 4,3021111 gold badges6060 silver badges101101 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

The issue is caused by a misunderstanding of what sync is actually doing.

In Vue 2.3 (unlike in Vue 1x), sync is nothing more than an event registration to facilitate two-way binding. Per the documentation:

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

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

is expanded into:

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

What does this mean in layman's terms? Since it is facilitating two-way binding to update the value being sync'd upon, you cannot use multiple properties (as a boolean expression), nor can you use the return value of a method since you must both read from and write to the same value.

In short, no, you cannot acplish using sync in the way you are currently utilizing it and I personally disagree with the implementation that the library has chosen since it isn't particularly clear and forces plicated workarounds.

That said, you can use a single property for binding the visibility of :visible.sync and you can trigger that based on your state in the following example:

Template:

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

We can bind the display to a single property and we can control dismissing with the :before-close handler and of course we can control our show conditions via a click event on a button. It isn't perfect, but it is a potential workaround.