将对象作为道具传递并将嵌套表单值与 Vuetify 文本字段同步答案

【问题标题】：Passing an Object as a prop and syncing nested form values with Vuetify text fields将对象作为道具传递并将嵌套表单值与 Vuetify 文本字段同步
【发布时间】：2021-01-24 20:35:04
【问题描述】：

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

家长：

  <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);
      },
    }

不确定我错过了什么？

【问题讨论】：

标签： vue.js vuejs2 vue-component vuetify.js

【解决方案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});
      },
    }

【讨论】：

【解决方案2】：

即使您可以像@BoussadjraBrahim 所说的那样做，我认为如果该组件是一个表单，它应该像一个表单一样工作，然后您只在用户尝试提交表单时将数据传递回父级。

类似这样，the code below is not valid, is just to demonstrate my point

FormComponent.vue

<template>
   <v-form :valid="valid" @submit.prevent="sendData">
      <v-text-field :value="value.id" :rules="[someValidation]" @input="id" />
      <v-text-field :value="value.name" @input="name" />
      <v-btn type="submit">Save</v-btn>
   </v-form>
</template>

<script>
.....
props: {
   value: { type: Object, required: true },
},

data() {
   return {
      valid: false,
      id: '',
      name: '',
   }
},

methods: {
      sendData() {
        this.$emit("submit",{id: this.id, name: this.name });
      },
}
</script>

然后在用户提交信息时，您会在 parent 中获取信息。

通过这种方法，您可以让逻辑验证组件的输入，这对我来说很有意义。

【讨论】：