"Exploring the Synchronization Feature in Vue.js 2.3 with Element UI Dialog Components

Question

"Exploring the Synchronization Feature in Vue.js 2.3 with Element UI Dialog Components

Recently, I've encountered some changes while using Element UI with the latest release of Vue.js 2.3

In my project, a dialog should only be displayed if certain conditions are met:

private.userCanManageUsers && private.pendingUsers.length > 0 && private.pendingDialogVisible

I attempted to implement the new attribute visible.sync, you can find more information in the documentation here

While it works fine with a single condition, it fails to work when there are multiple conditions present.

Working Case

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

Not Working Case

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

Is there a solution to use el-dialog with visible.sync and multiple conditions?
If not, what steps should I take to make it function as expected?

javascript vue.js vuejs2

Answer 1

Answer №1

The issue arises from a misinterpretation of the functionality of the sync in Vue.

In Vue 2.3, the sync feature acts solely as an event registration to enable two-way binding. According to the documentation:

In version 2.3, we reintroduced the .sync modifier for props, which is essentially syntax sugar that automatically expands into an additional v-on listener: The following
<comp :foo.sync="bar"></comp>
is expanded to:
<comp :foo="bar" @update:foo="val => bar = val"></comp>

To put it simply, this means that since it facilitates two-way binding, you cannot use multiple properties (as a boolean expression) or return a method's value because you need to both read from and write to the same value.

To clarify, no, you can't achieve what you're trying to do using sync in its current usage. I personally find the library's implementation unclear and leading to complex workarounds.

However, you can bind visibility to a single property with :visible.sync and trigger it based on your state in this 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 associate the display with a single property, manage dismissal with the :before-close handler, and adjust show conditions via a button click event. It may not be perfect, but it offers a potential workaround.

Answer 2

The issue arises from a misinterpretation of the functionality of the sync in Vue.

In Vue 2.3, the sync feature acts solely as an event registration to enable two-way binding. According to the documentation:

In version 2.3, we reintroduced the .sync modifier for props, which is essentially syntax sugar that automatically expands into an additional v-on listener: The following
<comp :foo.sync="bar"></comp>
is expanded to:
<comp :foo="bar" @update:foo="val => bar = val"></comp>

To put it simply, this means that since it facilitates two-way binding, you cannot use multiple properties (as a boolean expression) or return a method's value because you need to both read from and write to the same value.

To clarify, no, you can't achieve what you're trying to do using sync in its current usage. I personally find the library's implementation unclear and leading to complex workarounds.

However, you can bind visibility to a single property with :visible.sync and trigger it based on your state in this 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 associate the display with a single property, manage dismissal with the :before-close handler, and adjust show conditions via a button click event. It may not be perfect, but it offers a potential workaround.

"Exploring the Synchronization Feature in Vue.js 2.3 with Element UI Dialog Components

Working Case

Not Working Case

Answer №1

Similar questions

Ensure that the number is valid using Express Validator in Node.js

Is it possible to send an entire HTML table to the server and then update the database table with it?

Trouble with comparing two datetime values in JavaScript

Discovering a particular string within a jQuery array object: Tips and tricks

Passing a particular method of a specific instance as an argument

Verify the functionality of the input fields by examining all 6 of them

What is causing the extra space on the right side of the box?

Vue JS - Issue with data reactivity not being maintained

Parameterized function call on click event

Manipulating arrays in a JSON file with JavaScript

Experience the latest HTML5 features directly within a Java desktop GUI, with seamless communication through

The absence of a closing parentheses in the argument is causing an issue when rendering

Ways to resolve the issue of BrowserWindow not being recognized as a constructor when trying to create a child window within the Electron

What makes ngFor unique in Angular that allows it to not require keys like in Vue and React?

How can I identify when a CSS transition on a particular element has ended if there are several transitions occurring simultaneously?

Scripts in iframes within webviews are not preloading and executing properly

Display the chosen date from the datepicker in the input field

How can I extract the value of a JavaScript variable using jsoup in an HTML document?

Accessing the req object in Node.js using Express

Submit a form to the same page without reloading and toggle the visibility of a div after submission