[Vuejs]-Vuetify How to update component data when list item group select changed

by

0👍

You can either use store value and watch it from the component you want to track the change (it is possible to watch store properties if they change). If using vuex: https://vuex.vuejs.org/api/#watch

Or you can use emits and listen to the change on desired component, if there’s depth issue for the emit you could pass emits on top level using (v-on="$listeners"): https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

Since there’s no statement about Vue or Vuetify version, inferring it is the 2nd version.

Sometimes when using Vuetify or UI libraries we may forget the features that Vue provides. Despite Vuetify having built-in features most probably they can be overridden by implementing yours on top of them.

0👍

I just added an another component and passing the model value as a prop in that component.

Live Demo :

Vue.component('another-component', {
  props: ['val'],
  template: '<h3>{{ val }}</h3>'
});

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    items: [
      { text: 'Inbox' },
      { text: 'Star' },
      { text: 'Send' },
      { text: 'Drafts' }
    ],
    model: 1,
  }),
});
<script src="https://unpkg.com/vue@2.x/dist/vue.js"></script>
<script src="https://unpkg.com/vuetify@2.6.12/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/vuetify@2.6.12/dist/vuetify.min.css"/>
<div id="app">
  <v-list>
    <v-list-item-group v-model="model">
      <v-list-item v-for="(item, i) in items" :key="i">
        {{ item.text }}
      </v-list-item>
    </v-list-item-group>
  </v-list>
  
  <another-component :val="items[model].text"></another-component>
</div>

Leave a comment