视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
vue中$set的使用(结合在实际应用中遇到的坑)
2020-11-27 22:11:49 责编:小采
文档

最近在开发过程中遇到一个问题。在节点上面写点击事件时,点击事件不执行。代码如下:

<!-- 操作 -->
 <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事件一直不执行,一开始以为是点击事件没写对一直在找原因,后面突然想到会不会是数据不同步的原因的,因为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
 })
 }
 }
}

之后我直接在数据里面加上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
 }]
 }
 } 

原来是在我们使用vue进行开发,当生成vue示例后,再次给数据赋值时,有时候并不能自动更新到数据上去,这时候我们就要通过$set来解决这个问题,解决代码如下:

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

至此就解决啦。

下载本文
显示全文
专题