请教一个 computed 的 set 方法无法触发的问题 ？

2021-05-13 13:25:09 +08:00
 tanszhe

下面的代码是一个最简单的列子，必须要用到 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>
1752 次点击
所在节点    Vue.js
8 条回复
no1xsyzy
2021-05-13 13:35:41 +08:00
你如果说的是 v-model="v.title" 的话
这里动的是计算中间量（那个生成的 r ），而不是 newList
TomatoYuyuko
2021-05-13 13:44:11 +08:00
computed 不能深度监听，watch 可以，你试试换 watch 。不知道是不是这个原因
i0error
2021-05-13 13:45:05 +08:00
这种可以拆成组件，写计算属性就比较爽了
66beta
2021-05-13 13:53:26 +08:00
对 newList 做赋值，才会触发 https://v3.vuejs.org/guide/computed.html#computed-setter
codder
2021-05-13 13:57:41 +08:00
4 楼正解，是给这个 list 数组重新赋值才会触发更新，可以采用 2 楼的 watch 做深度监听，来实现你的需求
EPr2hh6LADQWqRVH
2021-05-13 14:05:41 +08:00
https://gist.github.com/nomagick/11d5753a2d87c4ab06702270c1d4a923
wunonglin
2021-05-13 14:21:06 +08:00
为什么要这样写？你 get 的时候是 newList，set 也必须是 newList 。既然你是 input，直接写个 change function 不就行了
3wdddd
2021-05-13 16:16:50 +08:00
你都没碰过 newList，set 怎么会触发呢

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/776695

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX