"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

Error Encountered in Next.js: PDFtron Webviewer - Troubleshooting

Convert time display to a 24-hour format using JavaScript

Extracting data from websites: How to gather information from dynamic HTML elements

"Adding an Image to Another Image in HTML or JavaScript: A Step-by-Step

Why does React / NextJS throw a "Cannot read properties of null" error?

What causes the syntax error when attempting to delete using ng-init in a straightforward manner?

Interested in learning how to filter nested tables?

Managing file system operations in Node.js

Differentiating a path element in SVG by dynamically adding color using d3 and react

What is the best way to transform a date such as '2021-06-01T11:17:00-07:00' into the corresponding date and time for a specific location (New Delhi) using JavaScript?

Transform a numerical variable into a string data type

Saving an HTMLCanvasElement as a JPEG in Laravel

confirmation message upon completing a form submission

Create a server directory structure that populates multiple HTML dropdown lists using either jQuery or AJAX

What are the best practices for utilizing databases with both Javascript and JSF frameworks?

The React/Redux application is experiencing difficulties with API calls, as they are returning empty responses and the actions are not being triggered

Receiving JSON objects from Javascript in Django Views

How much worth does an unfilled text input box hold?

Drag and drop non-event elements onto events using jQuery FullCalendar

Steps for connecting data to a react table