Vue watch 和 display 深度变化

Question

我正在尝试为用户 selected

的每个类别显示一条消息

<v-select multiple style="position: relative; top: 20px;" 
    color="white" v-if="count == 3 && question" solo placeholder="Please Choose" 
v-model="selected.category" :items="categories" item-text="name" return-object></v-select>

用户可以select多个类别，每个类别中都有我要显示的特定消息。我正在使用 watcher 来观察变化。

watch: {
            'selected.category': {

                handler(e) {
                    console.log(e)
                        this.icon = "mdi-emoticon"
                        this.text = this.selected.category.chat //This is an array now because multiple categories are selected
                        this.selection = true
                }
            },
}

上面的代码是错误的，它只在用户只能select一个类别时使用，现在我希望他们能够select多个。我只是想不通如何观察这些深层变化并在 select 编辑多个类别时显示类别消息。有什么方法可以在处理程序中发送最新的 selected 类别索引，或者只发送 selected 对象？

Answer 1

这让它起作用了。

 'selected.category': {

                handler(e) {
                    console.log(e)
                        this.icon = "mdi-emoticon"
                        this.text = this.selected.category[this.selected.category.length - 1].chat
                        this.selection = true
                }
            },

Vue watch 和 display 深度变化

Vue watch and display deep changes

javascript

vue.js

vuetify.js