vue中$set的使用(結(jié)合在實(shí)際應(yīng)用中遇到的坑)
最近在開(kāi)發(fā)過(guò)程中遇到一個(gè)問(wèn)題。在節(jié)點(diǎn)上面寫(xiě)點(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í)行，一開(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)
})
}
至此就解決啦。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue實(shí)現(xiàn)頁(yè)面滾動(dòng)到底部刷新
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁(yè)面滾動(dòng)到底部刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載的實(shí)現(xiàn)方法
這篇文章主要介紹了vue自定義穿梭框支持遠(yuǎn)程滾動(dòng)加載,iview是全局注入，基本使用原先的類(lèi)名進(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ì)代碼,本文通過(guò)實(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í)例代碼
頁(yè)面中會(huì)有很多時(shí)候需要彈窗提示,我們可以寫(xiě)一個(gè)彈窗組件,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)自定義"模態(tài)彈窗"組件的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2021-12-12
Vue?ElementUI?table實(shí)現(xiàn)表格斜線(xiàn)分隔線(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue?ElementUI?table實(shí)現(xiàn)表格斜線(xiàn)分隔線(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue-router跳轉(zhuǎn)方式的區(qū)別解析
在Vue中，router-link稱(chēng)為聲明式路由，:to綁定為跳轉(zhuǎn)的目標(biāo)地址，一種是通過(guò)name，另一種是path，這篇文章主要介紹了vue-router跳轉(zhuǎn)方式的區(qū)別,需要的朋友可以參考下2022-12-12
element滾動(dòng)條組件el-scrollbar的使用詳解
本文主要介紹了element滾動(dòng)條組件el-scrollbar的使用詳解，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(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)右鍵菜單問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04