CODEWITHSUNDEEP
vue.jsvuetify.jsnuxt.js
Eric
Eric

Reputation: 401

How to solve v-switch vuetify only binds one way?

My v-switch from vuetify is only binding one way. If i load in my data it switches on or off. so its working if i load data in the v-model of the v-switch. But if i switch the v-switch, it switches off, but does not change anything.

here is the code:

 <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>

so i clicked on the first switch and it does not change the state

i tried to have a normal prop in the data function. i made a switch: null prop and it will react fine to that, but not to my code. Any idea?

Upvotes: 0

Views: 1640

Answers (1)

Hammerbot
Hammerbot

Reputation: 16354

My guess is that your data is not reactive when you write:

// 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)
})

You should use the $set method instead and write:

// 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)
}))

See https://v2.vuejs.org/v2/guide/reactivity.html for more information on reactivity

Does this solve your problem?

Upvotes: 1

Related Questions