this.$set怎么在vue中使用

這篇文章給大家介紹this.$set怎么在vue中使用，內(nèi)容非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

當vue的data里邊聲明或者已經(jīng)賦值過的對象或者數(shù)組（數(shù)組里邊的值是對象）時，向?qū)ο笾刑砑有碌膶傩裕绻麓藢傩缘闹?，是不會更新視圖的。

<template>
 <div id="app">
  <p v-for="item in items" :key="item.id">{{item.message}}</p>
  <button class="btn" @click="handClick()">更改數(shù)據(jù)</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 可以觸發(fā)更新視圖
 },
 methods: {
  handClick(){
   let change = this.items[0]
   change.message="shen"
   this.$set(this.items,0,change)
  }
 }
}
</script>

<style>

</style>

調(diào)用方法: Vue.set( target , key , value)

• target: 要更改的數(shù)據(jù)源（可以是一個對象或者數(shù)組）

• key 要更改的具體數(shù)據(jù) （索引）

• value 重新賦的值
  

關(guān)于this.$set怎么在vue中使用就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。