道具未保存到 vue 组件中的本地状态

Posted 2023-02-23

【中文标题】道具未保存到 vue 组件中的本地状态

【英文标题】：Props not being saved to a local state in vue components

【发布时间】：2021-08-31 03:11:07

【问题描述】：

(follow-up).

在

https://codesandbox.io/s/sjm0x

props 旨在保存到本地对象（供以后使用）并从那里渲染。它的外观/行为应该像：

https://codesandbox.io/s/v9pp6

（“书籍”和“电影”都是可拖动的）。

第一个工作案例：

<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>

产生：

但直接使用props，不考虑突变：

第二个例子：

<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>

将道具保存到本地对象itemSectionData，但不再渲染输出：

【问题讨论】：

请分享相关内容并准确说明问题出在哪里，并保留复制链接

我没有投票结束这个问题，我没有以良好的声誉结束用户的问题，因为我知道他会在需要时编辑它

第二个例子中，v-for="category in this.itemSectionData.itemSectionCategory中是否需要this.？

这是为了“好措施”；无论如何，输出/行为都是相同的

【参考方案1】：

首先在您的数据方法中将itemSectionData 定义为一个空对象。

    data() 
      return 
        itemSectionData: 
    ;
  

然后为传递给组件的 prop itemSectionProps 定义一个观察者，并将其值分配给新定义的变量 itemSectionData，如下所示：

    watch: 
    itemSectionProps: 
      handler() 
        this.itemSectionData = this.itemSectionProps;
      
    
  

然后您可以在组件中使用新变量

看看https://codesandbox.io/s/dreamy-sun-smexc?file=/src/components/InventorySectionC.vue:1117-1242