下面的代码是一个最简单的列子,必须要用到 computed,我希望在表单变化的时候能在 set 方法监听到 并做相应的处理。 代码如下
<!doctype html>
<html lang="en">
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.0.7/vue.global.prod.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<template v-for="v in newList">
<div><input type="text" v-model="v.title"></div>
</template>
</div>
<script>
Vue.createApp({
data() {
return {
list: [{title: 'A1'}, {title: 'B1'}, {title: 'C1'}]
}
},
computed: {
newList: {
get() {
let r = [];
this.list.forEach(v => {
r.push({title: v.title + ' - dd'});
});
return r;
},
set(v) {
// 没有执行
console.log(this.$set);
}
}
}
}).mount('#app');
</script>
</body>
</html>
1
no1xsyzy 2021-05-13 13:35:41 +08:00
你如果说的是 v-model="v.title" 的话
这里动的是计算中间量(那个生成的 r ),而不是 newList |
2
TomatoYuyuko 2021-05-13 13:44:11 +08:00
computed 不能深度监听,watch 可以,你试试换 watch 。不知道是不是这个原因
|
3
i0error 2021-05-13 13:45:05 +08:00
这种可以拆成组件,写计算属性就比较爽了
|
4
66beta 2021-05-13 13:53:26 +08:00
对 newList 做赋值,才会触发 https://v3.vuejs.org/guide/computed.html#computed-setter
|
5
codder 2021-05-13 13:57:41 +08:00
4 楼正解,是给这个 list 数组重新赋值才会触发更新,可以采用 2 楼的 watch 做深度监听,来实现你的需求
|
6
EPr2hh6LADQWqRVH 2021-05-13 14:05:41 +08:00
|
7
wunonglin 2021-05-13 14:21:06 +08:00
为什么要这样写?你 get 的时候是 newList,set 也必须是 newList 。既然你是 input,直接写个 change function 不就行了
|
8
3wdddd 2021-05-13 16:16:50 +08:00
你都没碰过 newList,set 怎么会触发呢
|