Vuetify How to update component data when list item group select changed-CodePudding

I'm using v-list-item-group and I want to show data in another component when the list item is selected. clear data when I unSelect item, and change data when I click on another list item

how can I possibly do it in vue? the list item which I select: Here I want to clear curr step data if the list.eid changed or when index changed

 <v-list-item-group v-model="wfs">
                  <v-list-item v-for="(list,index) in workflowStepsList" :key="index"
                               @click="getWorkflowStep(list.eid)">
                <v-list-item-action-text > {{ index 1 }}</v-list-item-action-text>
                <v-list-item-content v-if="!list.title">
                  {{ list.stepTitle }}
                </v-list-item-content>
                <v-list-item-content v-if="!list.stepTitle">
                  {{ list.title }}
                </v-list-item-content>
                <v-list-item-icon>
                  <v-icon small color="red">mdi-delete</v-icon>
                </v-list-item-icon>
              </v-list-item>
            <v-list-item v-if="!workflowStepsList.length">
              مرحله ای وجود ندارد
            </v-list-item>
          </v-list-item-group>

and the list I render data based on what I selected:

 <v-card>
            <v-card-title >
              مرحله فعلی
              <add-curr :getSteps="getSteps"/>
            </v-card-title>
            <v-card-text>
              <v-list>
                <v-list-item-group  v-model="stepId">
                  <v-list-item
                      v-if="!currStep.length"
                      
                  >
                    یک مرحله انتخاب کنید
                  </v-list-item>
                  <v-list-item
                      v-for="(element) in currStep"
                      :key="element.eid"
                      v-show="element.eid !== null"
                  >
                    {{ element.title }}
                  </v-list-item>
                </v-list-item-group>
              </v-list>
            </v-card-text>
          </v-card>

the function:

async getWorkflowStep(weid) {
  await this.$store.dispatch("axiosGet",
      {url: `folder/api/workflow-steps/${weid}`, params: {workflowId: this.id}}).then(response => {
    if (response.status === 'error') return
    this.workflowStepsObj = response.data.data
    const x = response.data.data
    const curr = {
      title: x.stepTitle,
      eid: x.stepEid
    }
    this.currStep.push(curr)
   
  })
},

CodePudding user response：

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/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/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>

CodePudding user response：

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.