vue中 this.$set的用法详解

https://www.jb51.net/article/169428.htm

 

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

<template>  <div id="app">   <p v-for="item in items" :key="item.id">{{item.message}}</p>   <button class="btn" @click="handClick()">更改数据</button>  </div> </template>   <script> export default {  name: 'App',  data () {   return {    items: [         { message: "one", id: "1" },         { message: "two", id: "2" },         { message: "three", id: "3" }       ]   }  },  mounted () {    this.items[0] = { message:'first',id:'4'} //此时对象的值更改了，但是视图没有更新   // let art = {message:'first',id:"4"}   // this.$set(this.items,0,art) //$set 可以触发更新视图  },  methods: {   handClick(){    let change = this.items[0]    change.message="shen"    this.$set(this.items,0,change)   }  } } </script>   <style>   </style>

调用方法: Vue.set( target , key , value)

• target: 要更改的数据源（可以是一个对象或者数组）
• key 要更改的具体数据 （索引）
• value 重新赋的值