如何解决 v-switch vuetify 只绑定一种方式？答案

【问题标题】：How to solve v-switch vuetify only binds one way?如何解决 v-switch vuetify 只绑定一种方式？
【发布时间】：2020-01-15 14:04:31
【问题描述】：

我来自 vuetify 的 v-switch 仅绑定一种方式。如果我加载我的数据，它会打开或关闭。所以如果我在 v-switch 的 v-model 中加载数据，它就可以工作。但是如果我切换 v-switch，它会关闭，但不会改变任何东西。

代码如下：

 <v-data-table :headers="datatable.headers" :items="datatable.items" class="elevation-1">
     <template v-slot:body="{ items }">
         <tr v-for="(item, index) in items" :key="index">
             <td>{{item.name}}</td>
             <td @click="() => { $router.push(`/settings/${item.name.toLowerCase()}`) }"><v-icon small>edit</v-icon></td>
             <td><v-switch v-model="inMenu[item.name.toLowerCase()]" :label="`Switch 1: ${inMenu[item.name.toLowerCase()]}`"></v-switch></td>
       </tr>
   </template>
</v-data-table>

<script>
export default {
    data() {
        return {
            tabs: [
                'Content types'
            ],
            tab: null,
            datatable: {
                items: [],
                headers: [{
                    text: 'Content types', value: "name"
                }]
            },
            settings: null,
            inMenu: {},
        }
    },
    mounted() {
      this.$axios.get('/settings.json').then(({data}) => {
         this.settings = data
      });

      this.$axios.get('/tables.json').then(({data}) => {
            // set all content_types
            data.map(item => {
               this.datatable.items.push({
                   name: item
               })
            })
            // check foreach table if it's in the menu
            this.datatable.items.forEach(item => {
              this.inMenu[item.name.toLowerCase()] = JSON.parse(this.settings.menu.filter(menuitem => menuitem.key == item.name.toLowerCase())[0].value)
            })


       })
    },
    updated() {
      console.log(this.inMenu)
    }
}
</script>

所以我点击了第一个开关，它并没有改变状态

我试图在 data 函数中有一个正常的道具。我做了一个开关：null prop，它会对此做出很好的反应，但不会对我的代码做出反应。有什么想法吗？

【问题讨论】：

标签： vue.js vuetify.js nuxt.js

【解决方案1】：

我的猜测是你的数据在你写的时候没有反应：

// check foreach table if it's in the menu
this.datatable.items.forEach(item => {
  this.inMenu[item.name.toLowerCase()] = JSON.parse(this.settings.menu.filter(menuitem => menuitem.key == item.name.toLowerCase())[0].value)
})

您应该改用$set 方法并编写：

// check foreach table if it's in the menu
this.datatable.items.forEach(item => {
  this.$set(this.inMenu, item.name.toLowerCase(), JSON.parse(this.settings.menu.filter(menuitem => menuitem.key == item.name.toLowerCase())[0].value)
}))

有关反应性的更多信息，请参阅https://vuejs.org/v2/guide/reactivity.html

这能解决您的问题吗？

【讨论】：