未将道具保存到 vue 组件中的本地状态 [英] Props not being saved to a local state in vue components
问题描述
(
但是直接使用 props 并且不考虑突变:
第二个例子:
<draggable v-model=this.itemSectionData.itemSectionCategory"><过渡组></transition-group></可拖动>
</模板>
将道具保存到本地对象 itemSectionData 但不再呈现输出:
首先将 itemSectionData 定义为数据方法中的空对象.
数据(){返回 {itemSectionData:{}};}然后为传递给组件的 prop itemSectionProps 定义一个观察者，并将它的值分配给新定义的变量 itemSectionData，如下所示:
观看:{itemSectionProps:{处理程序(){this.itemSectionData = this.itemSectionProps;}}}然后您可以在组件中使用新变量
看看这个 https://codesandbox.io/s/dreamy-sun-smexc?file=/src/components/InventorySectionC.vue:1117-1242
(follow-up).
In
https://codesandbox.io/s/sjm0x
props are intended to be saved to a local object (for later use) and rendered from there. It should look/behave like:
https://codesandbox.io/s/v9pp6
("Books" and "Movies" are both draggable).
First working case:
<template>
<div class="inventory-section-component">
<draggable v-model="itemSectionProps.itemSectionCategory">
<transition-group>
<div
v-for="category in itemSectionProps.itemSectionCategory"
:key="category.itemSectionCategoryId"
>
<!-- <p>{{ category.itemSectionCategoryName }}</p> -->
<inventory-section-group-component :itemSectionGroupData="category">
</inventory-section-group-component>
</div>
</transition-group>
</draggable>
</div>
</template>
produces:
but uses props directly and does not take into account mutations:
The second example:
<template>
<div class="inventory-section-component">
<draggable v-model="this.itemSectionData.itemSectionCategory">
<transition-group>
<div
v-for="category in this.itemSectionData.itemSectionCategory"
:key="category.itemSectionCategoryId"
>
<inventory-section-group-component :itemSectionGroupProps="category">
</inventory-section-group-component>
</div>
</transition-group>
</draggable>
</div>
</template>
saves props to a local object itemSectionData but the output no longer gets rendered:
First define itemSectionData as an empty object in your data method.
data() {
return {
itemSectionData: {}
};
}
Then define a watcher for the prop itemSectionProps being passed to the component and assign it's values to the newly defined variable itemSectionData like such:
watch: {
itemSectionProps: {
handler() {
this.itemSectionData = this.itemSectionProps;
}
}
}
You can then use the new variable within the component
Check this out https://codesandbox.io/s/dreamy-sun-smexc?file=/src/components/InventorySectionC.vue:1117-1242
这篇关于未将道具保存到 vue 组件中的本地状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
