我正在使用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)
})
},
2条答案
按热度按时间6xfqseft1#
我只是添加了另一个组件,并将模型值作为
prop
传递到该组件中。现场演示**:**
第一个
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有内置特性,但很可能通过在它们之上实现你的特性来覆盖它们。