Question

我有一个使用子组件中包含的表单的应用程序。道具（wizardData）从父级传递给子级。如果该表单用于输入一组新数据，则该属性中的字段值将为null；否则，该字段将为null。如果用户正在查看/编辑存储的数据，则字段值将包含这些存储的数据值。

我的问题在后一种情况下发生。尽管表单的字段中填充了存储的值，但是当我单击以编辑任何字段时（我仅在下面的代码中显示了其中的两个），表单中的所有值都消失了，并且$ emit调用将父级更新为null值。

我在这里做什么错了？

谢谢，汤姆

子组件

<template>
  <div>
      <form @input="submit" class="form">
      <v-card-text>
        <v-text-field       
            model='wizardData.product'
            type="text"
            label="Name"
            box
            max="100%"
            autofocus
        ></v-text-field>
        <v-text-field
            model='wizardData.source'
            type="text"
            label="Source"
            box
        ></v-text-field>
     </v-card-text>
    </div>
</template>

<script>
  export default {
    props: {
      wizardData: {
        type: Object,
        required: true
      }
    },
    data() {
      return {
        form: {
          product: null,
          source: null,
        }
      }
    },
      submit () {
        this.$emit('update', {
          data: {
            product: this.form.product,
            source: this.form.source,
          },
        })
      },
    }
  }
</script>

我的道具如下：

wizardData

{
  "product": "Cucumber",
  "source": "D112",
}

Answer 1

将输入字段模型绑定到ggplot2::xxxx道具违反了Vue的One-Way Data Flow。

您应该将组件的本地数据初始化为prop的副本，并将字段模型绑定到Suggests。例如

wizardData

并在您的模板中

form

JSFiddle演示〜https://jsfiddle.net/z04um7Lb/

如果// default form values in case they're missing from wizardData const FORM_TEMPLATE = { product: null, source: null } export default { props: { wizardData: Object }, data () { return { form: {...FORM_TEMPLATE, ...this.wizardData} } }, methods: { submit() { this.$emit('update', { data: this.form }) } } }在组件的外部进行了更改，则您将需要设置观察者来监视道具的更改，例如

<v-text-field v-model="form.product" ... />

另一个（可能更好）的选择是使用条件渲染来阻止表单组件在数据准备就绪之前显示，例如

wizardData

在子组件中更改表单中的输入数据会导致所有其他字段清除

1 个答案: