vue.set in vue has several parameters-Vue.js-php.cn

vue.set in vue has several parameters

藏色散人

Release： 2023-01-13 00:44:57

Original

4030 people have browsed it

vue.set in vue has 3 parameters, namely: 1. target, indicating the data source to be changed; 2. key, indicating the specific data to be changed; 3. value, indicating the reassigned value .

vue.set in vue has several parameters

The operating environment of this article: windows10 system, vue2.9, Dell G3 computer.

Vue.set()

Vue.set( target, key, value )

Copy after login

Parameters:

target: The data source to be changed (can be an object or Array)
key: the specific data to be changed
value: the reassigned value

Official API: Vue.set()

Usage of Vue.set

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="app2">
    <p v-for="item in items" :key="item.id">
        {{item.message}}
    </p>
    <button @click="btn2Click()">动态赋值</button><br/>    
    <button @click="btn3Click()">为data新增属性</button>
</div>
<script src="../../dist/vue.min.js"></script>
<script>
var vm2=new Vue({
    el:"#app2",
    data:{
        items:[
            {message:"Test one",id:"1"},
            {message:"Test two",id:"2"},
            {message:"Test three",id:"3"}
        ]
    },
    methods:{
        btn2Click:function(){
            Vue.set(this.items,0,{message:"Change Test",id:&#39;10&#39;})
        },
        btn3Click:function(){
            var itemLen=this.items.length;
            Vue.set(this.items,itemLen,{message:"Test add attr",id:itemLen});
        }
    }
});
</script>
</body>
</html>

Copy after login

The page is like this

vue.set in vue has several parameters

After I click the first button, I run the btn2Clcick method in methods. At this time, I want to change the Test one to Change Test

vue.set in vue has several parameters

The result after running: At this time The Test one in the first column of the list has become Change Test

vue.set in vue has several parameters

#There is a situation that you have to be wary of here:

When you get used to writing JS, there are Maybe I want to change the data in a certain subscript in the array. I just change this.items[XX], such as:

btn2Click:function(){
  this.items[0]={message:"Change Test",id:&#39;10&#39;}
}

Copy after login

Let’s take a look at the result:

vue.set in vue has several parameters

This situation is a note clearly stated in the Vue documentation. Due to JavaScript limitations, Vue cannot detect data changes, so when we need to dynamically change the data, Vue.set() can completely meet our needs.

Students who look carefully may ask, isn’t there a button? What’s its use?

Let’s look directly:

vue.set in vue has several parameters

This is the initial list data, there are three objects in the data

After clicking:

vue.set in vue has several parameters

It can be seen here that Vue.set() can not only modify data, but also add data, making up for the shortcomings of Vue's array mutation method

Tip:Vue. set() can also be written as this.$set()

in methods: "vue tutorial"

The above is the detailed content of vue.set in vue has several parameters. For more information, please follow other related articles on the PHP Chinese website!