作者:jb51 来源:脚本之家 时间:2019-09-15 03:46:28 我要评论

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

  <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 重新赋的值

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

52阅读 | 0评论
你的回应
写文章

联系我们