V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
tanszhe
V2EX  ›  Vue.js

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

  •  
  •   tanszhe · 2021-05-13 13:25:09 +08:00 · 1927 次点击
    这是一个创建于 1291 天前的主题,其中的信息可能已经有所发展或是发生改变。

    下面的代码是一个最简单的列子,必须要用到 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>
    
    8 条回复    2021-05-13 16:16:50 +08:00
    no1xsyzy
        1
    no1xsyzy  
       2021-05-13 13:35:41 +08:00
    你如果说的是 v-model="v.title" 的话
    这里动的是计算中间量(那个生成的 r ),而不是 newList
    TomatoYuyuko
        2
    TomatoYuyuko  
       2021-05-13 13:44:11 +08:00
    computed 不能深度监听,watch 可以,你试试换 watch 。不知道是不是这个原因
    i0error
        3
    i0error  
       2021-05-13 13:45:05 +08:00
    这种可以拆成组件,写计算属性就比较爽了
    66beta
        4
    66beta  
       2021-05-13 13:53:26 +08:00
    codder
        5
    codder  
       2021-05-13 13:57:41 +08:00
    4 楼正解,是给这个 list 数组重新赋值才会触发更新,可以采用 2 楼的 watch 做深度监听,来实现你的需求
    wunonglin
        7
    wunonglin  
       2021-05-13 14:21:06 +08:00
    为什么要这样写?你 get 的时候是 newList,set 也必须是 newList 。既然你是 input,直接写个 change function 不就行了
    3wdddd
        8
    3wdddd  
       2021-05-13 16:16:50 +08:00
    你都没碰过 newList,set 怎么会触发呢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2795 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 29ms · UTC 09:50 · PVG 17:50 · LAX 01:50 · JFK 04:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.