vue.js - 将对象作为 prop 传递并将嵌套表单值与 Vuetify 文本字段同步

Question

我正在尝试将输入的表单数据传递回父级。

父级:

  <AddForm
    :value.sync="field"
  ></AddForm>

data: () => ({
  field: {
    id: "",
    name: "",
  },
})

子AddForm:

  <v-text-field :value="value.id" @input="addId"></v-text-field>
  <v-text-field :value="value.name" @input="addName"></v-text-field>

  props: {
    value: { type: Object, required: true },
  },

    methods: {
      addId(e) {
        this.$emit("update:field.id", e);
      },
      addName(e) {
        this.$emit("update:field.name", e);
      },
    }

不确定我错过了什么？

Answer 1

我认为你应该只更新field而不通过传播this.value来指定嵌套字段并添加更新的字段并将其作为有效负载发出:

    <v-text-field :value="value.id" @input="addId"></v-text-field>
    <v-text-field :value="value.name" @input="addName"></v-text-field>

  props: {
    value: { type: Object, required: true },
  },

    methods: {
      addId(e) {
        this.$emit("update:field",{...this.value, id: e});
      },
      addName(e) {
        this.$emit("update:field", {...this.value,name:e});
      },
    }