vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑)

更新時(shí)間：2018年07月10日 09:06:23 作者：Forward_wuyi

這篇文章主要介紹了vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑),小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

最近在開發(fā)過程中遇到一個(gè)問題。在節(jié)點(diǎn)上面寫點(diǎn)擊事件時(shí)，點(diǎn)擊事件不執(zhí)行。代碼如下：

<!-- 操作 -->
    <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í)行，一開始以為是點(diǎn)擊事件沒寫對(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ì)回來會(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
   }]
  }
 }

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

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

至此就解決啦。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue
$set

相關(guān)文章

vue實(shí)現(xiàn)頁面滾動(dòng)到底部刷新
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面滾動(dòng)到底部刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-08-08
vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載,iview是全局注入，基本使用原先的類名進(jìn)行二次創(chuàng)建公共組件，修改基礎(chǔ)js實(shí)現(xiàn)邏輯，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下
2023-08-08
vue3封裝Element導(dǎo)航菜單的實(shí)例代碼
這篇文章主要介紹了vue3封裝Element導(dǎo)航菜單的實(shí)例代碼,分為菜單數(shù)據(jù)格式示例,控制導(dǎo)航收縮的詳細(xì)代碼,本文通過實(shí)例代碼介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧
2024-03-03
vue實(shí)現(xiàn)兩個(gè)區(qū)域滾動(dòng)條同步滾動(dòng)
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)兩個(gè)區(qū)域滾動(dòng)條同步滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-12-12
vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件實(shí)例代碼
頁面中會(huì)有很多時(shí)候需要彈窗提示,我們可以寫一個(gè)彈窗組件,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2021-12-12
Vue?ElementUI?table實(shí)現(xiàn)表格斜線分隔線
這篇文章主要為大家詳細(xì)介紹了Vue?ElementUI?table實(shí)現(xiàn)表格斜線分隔線，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-03-03
vue-router跳轉(zhuǎn)方式的區(qū)別解析
在Vue中，router-link稱為聲明式路由，:to綁定為跳轉(zhuǎn)的目標(biāo)地址，一種是通過name，另一種是path，這篇文章主要介紹了vue-router跳轉(zhuǎn)方式的區(qū)別,需要的朋友可以參考下
2022-12-12
element滾動(dòng)條組件el-scrollbar的使用詳解
本文主要介紹了element滾動(dòng)條組件el-scrollbar的使用詳解，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-04-04
對(duì)vue中的input輸入框進(jìn)行郵箱驗(yàn)證方式
這篇文章主要介紹了對(duì)vue中的input輸入框進(jìn)行郵箱驗(yàn)證方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-10-10
vue如何在表格中實(shí)現(xiàn)右鍵菜單
這篇文章主要介紹了vue如何在表格中實(shí)現(xiàn)右鍵菜單問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-04-04