快捷導(dǎo)航

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è)參考。一起跟隨小編過(guò)來(lái)看看吧

最近在開發(fā)過(guò)程中遇到一個(gè)問(wèn)題。在節(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ì)回來(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)行開發(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)
 })
}

至此就解決啦。

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

您可能感興趣的文章:

vue
$set

相關(guān)文章

詳解vue中axios請(qǐng)求的封裝
這篇文章主要介紹了vue中axios請(qǐng)求的封裝，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
Vue祖孫組件如何實(shí)現(xiàn)傳值
這篇文章主要介紹了Vue祖孫組件如何實(shí)現(xiàn)傳值問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-03-03
基于axios 解決跨域cookie丟失的問(wèn)題
今天小編就為大家分享一篇基于axios 解決跨域cookie丟失的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問(wèn)題
這篇文章主要介紹了解決vue watch數(shù)據(jù)的方法被調(diào)用了兩次的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11
VUE 無(wú)限層級(jí)樹形數(shù)據(jù)結(jié)構(gòu)顯示的實(shí)現(xiàn)
在做項(xiàng)目中，會(huì)遇到一些樹形的數(shù)據(jù)結(jié)構(gòu)，常用在左側(cè)菜單導(dǎo)航，本文就介紹一下如何實(shí)現(xiàn)，感興趣的可以了解一下
2021-07-07
解決echarts圖表使用v-show控制圖表顯示不全的問(wèn)題
這篇文章主要介紹了解決echarts圖表使用v-show控制圖表顯示不全的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
詳解Vue3中偵聽器watch的使用教程
學(xué)過(guò) vue2 的小伙伴們肯定學(xué)習(xí)過(guò)偵聽器，主要是用來(lái)監(jiān)聽頁(yè)面數(shù)據(jù)或者是路由的變化，來(lái)執(zhí)行相應(yīng)的操作，在 vue3里面呢，也有偵聽器的用法，功能基本一樣,本文就來(lái)為大家詳細(xì)講講
2022-07-07
uni-app?開發(fā)微信小程序定位功能
這篇文章主要介紹了uni-app?開發(fā)微信小程序定位,通過(guò)使用onLocationChange方法持續(xù)監(jiān)聽地址，根據(jù)定位精度字段判斷是否使用此次定位的經(jīng)緯度，需要的朋友可以參考下
2022-04-04
vue3+vite2中使用svg的方法詳解(親測(cè)可用)
vue2的時(shí)候使用的是字體圖標(biāo),缺點(diǎn)就是比較單一,到了vue3,相信瀏覽器的性能起來(lái),所以這里記錄一下,下面這篇文章主要給大家介紹了關(guān)于vue3+vite2中使用svg的相關(guān)資料,需要的朋友可以參考下
2022-08-08
vue項(xiàng)目如何監(jiān)聽localStorage或sessionStorage的變化
這篇文章主要介紹了vue 項(xiàng)目如何監(jiān)聽localStorage或sessionStorage的變化，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2021-01-01