Vuejs：如何向作为 props 传递的数组添加其他项目？

Question

我有一个对象

location

，我正在将其传递到我的表单中，以便表单字段能够正确重新填充。

我的父模板如下所示：

 <LocationForm :location="location" />

我的表单模板非常大，因此我无法在此处显示全部内容。但是，在我的位置，我允许用户创建限制日期。棘手的部分是，可能已经创建了（停电）日期，因此该数组可能已经有项目。

这就是我的

location

道具的（部分）样子：

// LocationForm.vue

props: {
    location: {
      type: Object,
      required: false,
      default: () => ({
        name: '',
        streetAddress1: '',
        blackouts: [], // this may already have values.
      })
  },

输出停电时我的模板看起来像这样：

<div v-for="(blackout, idx) in $v.location.blackouts.$each.$iter"
    :key="idx"
    class="space-y-6"
>...</div>

$v.

是因为我正在使用vuelidate来处理表单验证。

我的表单中有一个按钮，单击该按钮时，我想将新项目添加（推送）到我的

blackouts

数组中。问题是，当我单击按钮时，出现错误：

错误 prop 意外突变

这个错误是有道理的，我无法在父母不知情的情况下添加孩子。如何允许用户添加（推送）新的停电？

Answer 1

我看到您正在使用 vuelidate，并且您已经在循环遍历

blackouts

数组。 我喜欢将

$v

元素视为实际数据元素的扩展。

含义

$v.location

可以被认为与

location

相同。这就是使用 vuelidate（我相信可能还有其他）很有帮助的地方。

既然你有了这个：

<div v-for="(blackout, idx) in $v.location.blackouts.$each.$iter">

您可以将新项目推送到

$v.location.blackouts

。因此，如果您有一个按钮，单击后会添加新项目，您可以这样做：

<button @click="addNewBlackout()">Add new blackout</button>


addNewBlackout() {
    this.$v.location.blackouts.$model.push({
        name: '',
        ...
    });
},

现在，我的

$v.location.blackouts.$model

也将更新任何新项目。您不必弄清楚如何将附加数组“合并”回您的

$v.model