vue.set() (this.$set)的用法及说明

<ul class="province_area_style province_area">
            <li v-for="(item, index) in provinceArrs" :key='index' :id='index'><input type="checkbox" :id= "'checkbox' + index" :class="{checkOn: item.checkOn, checkOff: item.checkOff}" @click="clickProvince(index, item)"><label :for="'checkbox' + index">{{item.name}}</label><i @click="clickProvinceIcon(index, item)"></i></li>
          </ul>

clickProvince(pindex, pitem) {
      pitem.checkOn = !pitem.checkOn
      pitem.checkOff = !pitem.checkOff
      this.$set(this.provinceArrs, pindex, {p_name: pitem.p_name, p: pitem.p, name: pitem.name, c: pitem.c, checkOn: pitem.checkOn, checkOff: pitem.checkOff})
}

this.$set( target, key, value )

<template>
  <div>
     <div v-for="item in goodList" :key="item.id">
      {{item.name}}&nbsp;&nbsp;&nbsp;{{item.value}}
    </div>
    <Button type="success" @click="handleClick()">改变数据</Button>
  </div>
</template>

<script>
export default {
  name: 'mySet',
  data () {
    return {
      goodList: [
        {name: '书本', value: '200元', id: 1},
        {name: '玩偶', value: '200元', id: 2},
        {name: '薯片', value: '300元', id: 3}
      ]
    }
  },
  methods: {
    handleClick () {
      this.goodList[3] = {name: '口罩', value: '409元', id: 4}
      console.log(this.goodList)
    }
  }
}
</script>

 methods: {
    handleClick () {
      this.$set(this.goodList, 3, {name: '口罩', value: '409元', id: 4})
      console.log(this.goodList)
    }
  }