我将
apiStepNumber
属性从父组件传递到子组件,并在子组件中将其用作 v-model
值
注意:代码片段不起作用。请避免运行它们。片段仅供理解之用
父组件
我在父组件内调用各种 API,并将
apiNumber data variable
更新为 1 2 3.. 在成功的 API 调用后将其作为 apiStepNumber
属性传递。
if(firstApiCallSuccessful) this.apiNumber = 2;
if(secondApiCallSuccessful) this.apiNumber = 3;
..so on
<child-component :apiStepNumber="apiNumber"></child-component>
子组件
(我使用
apiStepNumber
属性作为 v 模型值和其他基本计算,但在 "Unexpected mutation of 'apiStepNumber' prop"
处出现错误
v-model="apiStepNumber"
)
<script>
export default {
props: {
apiStepNumber: {
type: Number,
required: true,
default: 1,
},
},
data() {
return {
steps: [
{ id: 1, text: "Emailing the Link" },
{ id: 2, text: "Getting Details" },
{ id: 3, text: "Extracting Data" },
{ id: 4, text: "Validating Data" },
{ id: 5, text: "Almost there..." },
{ id: 6, text: "All Done!" },
],
};
},
}
</script>
<v-stepper v-model="apiStepNumber" vertical>
<v-stepper-step
v-for="(item, i) in steps"
:key="item.id"
:complete="apiStepNumber > i + 1"
:step="i + 1"
:color="apiStepNumber > i + 1 ? 'success' : 'primary'"
>{{ item.text }}</v-stepper-step>
</v-stepper>
我尝试过的
提前感谢您对此的帮助。
正如错误所述,道具不能被改变。除非子级需要拥有自己的状态(例如撤消更改),否则它需要父级将所有更改应用到状态,这就是双向绑定与
v-model
约定一起工作的方式。
孩子需要在变化时发出事件:
<v-stepper
:modelValue="apiStepNumber"
@update:modelValue="$emit('update:modelValue', $event)"
>