Methods and examples of dynamically adding attributes using the Vue.set function-Vue.js-php.cn

Methods and examples of dynamically adding attributes using the Vue.set function

王林

Release： 2023-07-24 19:22:47

Original

2304 people have browsed it

Methods and examples of using the Vue.set function to dynamically add properties

In Vue, if we want to dynamically add a property to an existing object, we usually use the Vue.set function to fulfill. The Vue.set function is a global method provided by Vue.js, which can ensure responsive updates when adding properties. This article will introduce the use of Vue.set and provide a specific example.

First of all, in Vue, we usually use the data option to declare responsive data. Properties declared in the data option will be automatically tracked by Vue.js for changes and the view will be automatically updated based on the changes. However, if we try to add a new property directly to an existing object, Vue will not be able to detect the change, causing the view to not update correctly. At this time, we need to use Vue.set instead of the native attribute adding method.

The usage of Vue.set is very simple. It accepts three parameters: target object, attribute name and attribute value. After calling the Vue.set function, Vue will add a responsive property to the target object and ensure that the view is updated correctly. Now, let us demonstrate the usage of Vue.set through a concrete example.

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue.set示例</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <p>{{ message }}</p>
    <button @click="addProperty">添加属性</button>
  </div>

  <script>
    new Vue({
      el: '#app',
      data() {
        return {
          message: '原始属性'
        }
      },
      methods: {
        addProperty() {
          Vue.set(this, 'newProperty', '新属性值');
        }
      }
    })
  </script>
</body>
</html>

Copy after login

The Vue instance in the above example declares a data object and initializes a message attribute in data. In the page, we display the value of the message attribute and provide a button. When the button is clicked, the addProperty method is called.

In the addProperty method, we use the Vue.set function to dynamically add a newProperty attribute to the Vue instance, whose value is "new property value". When we click the button, the new properties will be added to the Vue instance, and the changes will be automatically tracked by Vue so that the view updates correctly. You can see on the page that the value of the new attribute is also rendered correctly.

Summary

Using the Vue.set function can ensure that dynamically added properties will be correctly tracked by Vue.js and update the view. In actual development, if we need to dynamically add attributes to an object, do not use the native attribute adding method directly. It is recommended to use the Vue.set function instead. This ensures responsive updating of data and thus correct rendering of the page.

I hope this simple example can help you understand and master the use of the Vue.set function. In actual development, when encountering similar needs, you can flexibly use the Vue.set function to dynamically add attributes.

The above is the detailed content of Methods and examples of dynamically adding attributes using the Vue.set function. For more information, please follow other related articles on the PHP Chinese website!