Vuetify如何在更改列表项组选择时更新组件数据

r3i60tvu  于 2022-11-25  发布在  Vue.js
关注(0)|答案(2)|浏览(150)

我正在使用v-list-item-group,并希望在选择list item时显示其他组件中的数据。当我选择unSelect项目时清除数据,并在单击其他list item时更改数据
我怎么可能做到这一点?我选择的列表项:如果list.eid发生更改或索引发生更改,我希望在此处清除Curr步长数据

<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 class="pe-4"> {{ 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>

和列表,我根据所选内容呈现数据:

<v-card>
            <v-card-title class="bg-success text-white d-flex justify-space-between">
              مرحله فعلی
              <add-curr :getSteps="getSteps"/>
            </v-card-title>
            <v-card-text>
              <v-list>
                <v-list-item-group class="v-list-item-group" v-model="stepId">
                  <v-list-item
                      v-if="!currStep.length"
                      class="text-muted"
                  >
                    یک مرحله انتخاب کنید
                  </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>

函数:

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)
   
  })
},
6xfqseft

6xfqseft1#

我只是添加了另一个组件,并将模型值作为prop传递到该组件中。
现场演示**:**
第一个

mwg9r5ms

mwg9r5ms2#

您可以使用store value并从要跟踪更改的组件中监视它(如果存储属性发生更改,则可以监视它们)。https://vuex.vuejs.org/api/#watch
或者,您可以使用emitings并侦听所需组件上的更改,如果emitings存在深度问题,您可以使用(v-on="$listeners”)在顶层传递emitings:https://v2.vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components
由于没有关于Vue或Vuetify版本的声明,因此推断其为第2个版本。
有时在使用Vuetify或UI库时,我们可能会忘记Vue提供的特性。尽管Vuetify有内置特性,但很可能通过在它们之上实现你的特性来覆盖它们。

相关问题