vue中$set如何使用

vue中$set如何使用，針對(duì)這個(gè)問(wèn)題，這篇文章詳細(xì)介紹了相對(duì)應(yīng)的分析和解答，希望可以幫助更多想解決這個(gè)問(wèn)題的小伙伴找到更簡(jiǎn)單易行的方法。

代碼如下：

<!-- 操作 -->
    <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>
    <!-- 操作 -->

這里面的click事件一直不執(zhí)行，一開(kāi)始以為是點(diǎn)擊事件沒(méi)寫(xiě)對(duì)一直在找原因，后面突然想到會(huì)不會(huì)是數(shù)據(jù)不同步的原因的，因?yàn)閑dit字段是自己添加進(jìn)去的字段，如下：

export default {
 name: 'strategic',
 data() {
  return {
   tableData: [{
    'pp_id': 4,
    'brand_name': '1414', 
    'project_name': '得意', 
    'description': '的u會(huì)回來(lái)會(huì)', 
    'publish_time': '2018-07-23',
    'is_used': 0 
   }]
  }
 },
 components: { },
 computed: {
 },
 created() {
  this.initTableData()
 },
 methods: {
  initTableData() {
   this.tableData.forEach(element => {
    element.edit = false
   })
  }
 }
}

之后我直接在數(shù)據(jù)里面加上edit字段，發(fā)現(xiàn)是能夠同步數(shù)據(jù)的，代碼如下：

data() {
  return {
   tableData: [{
    'pp_id': 4,
    'brand_name': '1414',
    'project_name': '1414',
    'description': '7588888888',
    'publish_time': '2018-07-23',
    'is_used': 0,
    'edit': false
   }]
  }
 }

原來(lái)是在我們使用vue進(jìn)行開(kāi)發(fā)，當(dāng)生成vue示例后，再次給數(shù)據(jù)賦值時(shí)，有時(shí)候并不能自動(dòng)更新到數(shù)據(jù)上去，這時(shí)候我們就要通過(guò)$set來(lái)解決這個(gè)問(wèn)題，解決代碼如下：

initTableData() {
 this.tableData.forEach(element => {
   this.$set(element, 'edit', false)
 })
}

關(guān)于vue中$set如何使用問(wèn)題的解答就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，如果你還有很多疑惑沒(méi)有解開(kāi)，可以關(guān)注億速云行業(yè)資訊頻道了解更多相關(guān)知識(shí)。