vue.js - Vue 监听 deep props 不触发
问题描述
我必须遵循一组组件来创建一个表
表 - 使用标题(传递列)和提供 rowData 和列的行列表
header - 利用传递的列并使用 headerCell 传递列属性
- 标题单元格
- row - 遍历给定的列并显示数据
我的问题如下,我希望标题上的单击(例如可见性)将 columnDefinition 更新为可见 true | false 并被行监视以相应地更新可见性。但是无论我尝试过什么观察者仍然没有触发。我究竟做错了什么?
/**** Table ***/
<template>
<table>
<HeaderRow :columns=computedColumns :groups=columnGroups v-
on:column:change=onColumnChange></HeaderRow>
<tbody>
<Row v-for="(row, index) in computedData" :key=index :data=row
:columns=computedColumns :rowIndex=index ></Row>
</tbody>
</table>
</template>
<script>
import Row from "./Row.vue";
import HeaderRow from "./HeaderRow.vue";
export default {
computed: {
/* If this.columns is set (columns is a prop) than map it to a new array, otherwise
try to identify the columns from the row data */
computedColumns: function() {
if (this.columns && this.columns.length) {
return this.columns.map(col => {
return Object.assign({
title: '',
name: '',
description: undefined,
className: '',
style: '',
visible: true,
sort: false,
group: undefined,
defaultValue: undefined,
}, col)
});
} else {
return (
this.data &&
this.data
.map(function(row) {
return Object.keys(row);
})
.reduce(function(arr, row) {
return arr.concat(
row.filter(function(value, index) {
return arr.indexOf(value) == -1;
})
);
}, [])
.map(function(column) {
return {
title: column,
name: column
};
})
);
}
},
}
/*** HeaderCell ***/
<th @click=toggleColumn :class=className><span>{{column.title}}</span></th>
...
...
toggleColumn: function(e) {
this.visible = !this.visible;
this.column.visible = this.visible;
this.$emit("column:change", {
column: this.column,
columnIndex: this.columnIndex
});
}
/*** Row ****/
<template>
<tr>
<td v-for="(cell, index) in cells" :key=index :class=cell.className
:style=cell.style v-html=cell.value ></td>
</tr>
</template>
<script>
export default {
props: {
data: {
default: []
},
columns: {
default: "",
type: Array
},
rowIndex: {
default: -1
}
},
watch: {
columns: {
handler: function () {
console.log('change occurred')
},
deep: true
}
},
解决方案
我注意到您的 columns 道具正在使用computedColumns
.
最好看看这是什么,因为当您从该计算属性返回值时,它可能会失去反应性。
例如,如果您的父母有以下情况:
computed: {
computedColumns() {
// return new set of columns
return [
{id: 1, visible: false},
{id: 2, visible: false},
{id: 3, visible: false}
]
}
}
然后该computedColumns
属性将没有任何反应性。因此,您将无法观看。
但是,如果你有一个例子:
data() {
return {
columns: [
{id: 1, visible: false},
{id: 2, visible: false},
{id: 3, visible: false}
]
}
},
computed: {
computedColumns() {
// return reactive data attribute
return this.columns
}
}
因为您引用的是原始数据属性,所以您将保持反应性。
因此,您可能必须重新考虑如何设置 columns 属性以保持反应性。
这是概述此示例的小提琴。
推荐阅读
- firewall - Freeswitch 使用的 RTP 端口与定义的不同
- react-native - 不工作我的第一个 react-native 应用程序 run-android ***
- oracle - EM 13c - 事件管理器的自定义视图
- html - 制作一个按钮以将元素从一个 html 页面移动到另一个 html 页面
- javascript - 在循环JS中获取
- java - 我们可以将 CDATA 嵌入到 xml 中名称值对的纯字符串中吗?
- javascript - 如何使tabIndex(输入字段)在页面加载的顶部开始 - Jquery
- sql - 如何构建交叉表查询表
- javascript - 将多个查询选择器存储在一个变量中的最佳方法
- .htaccess - 带有特殊字符的重定向 301