vue中$set的使用（結合在實際應用中遇到的坑）

11112發表於2018-07-10
Vue
  1. 最近在開發過程中遇到一個問題。在節點上面寫點選事件時，點選事件不執行。程式碼如下：
<!-- 操作 -->
<el-table-column  label="操作">
  <template slot-scope="scope">
    <span class="poi icon-hover f16 mr20" @click='scope.row.edit=!scope.row.edit'>
      <svg-icon :icon-class="scope.row.edit?'icon_edit_outline':'icon_save'"></svg-icon>
    </span>
    <span class="poi icon-hover f16">
      <svg-icon icon-class="icon_delete"></svg-icon>
    </span>
  </template>
</el-table-column>
<!-- 操作 -->
複製程式碼
  1. 這裡面的click事件一直不執行，一開始以為是點選事件沒寫對一直在找原因，後面突然想到會不會是資料不同步的原因的，因為edit欄位是自己新增進去的欄位，如下：
export default {
  name: 'strategic',
  data() {
    return {
      tableData: [{
        'pp_id': 4,
        'brand_name': '1414', 
        'project_name': '得意', 
        'description': '的u會回來會', 
        'publish_time': '2018-07-23',
        'is_used': 0 
      }]
    }
  },
  components: { },
  computed: {
  },
  created() {
    this.initTableData()
  },
  methods: {
    initTableData() {
      this.tableData.forEach(element => {
        element.edit = false
      })
    }
  }
}
複製程式碼
  1. 之後我直接在資料裡面加上edit欄位，發現是能夠同步資料的，程式碼如下：
data() {
    return {
      tableData: [{
        'pp_id': 4,
        'brand_name': '1414',
        'project_name': '1414',
        'description': '7588888888',
        'publish_time': '2018-07-23',
        'is_used': 0,
        'edit': false
      }]
    }
 }
複製程式碼
  1. 原來是在我們使用vue進行開發，當生成vue示例後，再次給資料賦值時，有時候並不能自動更新到資料上去，這時候我們就要通過$set來解決這個問題，解決程式碼如下：
initTableData() {
  this.tableData.forEach(element => {
      this.$set(element, 'edit', false)
  })
}
複製程式碼

這段程式碼的功能是通過$set來新增edit欄位。

小tip：

Vue.set()在methods中也可以寫成this.$set()，我在這個專案中用的就是this.$set()

複製程式碼

至此就解決啦。

如有錯誤，歡迎各位批評指正。^-^

相關文章