Question

我想制作一个Vue组件，允许用户创建或编辑邮寄地址。到目前为止，我拥有的组件看起来像这样（简化）...

<template>
<v-container>
  <v-form ref="form" lazy-validation>
    <v-text-field 
      v-bind:value="address.street"
      v-on:input="$emit('input', $event.target.value)"
      label="Number and Street">
    </v-text-field>
  </v-form>
</v-container>
</template>

<script>    
export default {
  name: 'address-form',
  props: ['address'],
  // other stuff
}
</script>

父级从商店中获取一个更大的对象，并以此作为道具来馈送该地址...

<p>Just to test: {{outerObject.address.street}}</p>
<address-form address="outerObject.address" v-on:changed-address="changedAddress" />

在脚本中...

computed: {
  outerObject () {
    let id = this.$route.query.id
    let outerObject = this.outerObjects.find(o => o.id === id)
    return (outerObject) ? outerObject : this.newOuterObject
  },
  ...mapGetters(['outerObjects'])

但是有两件事出了错：

（1）即使我看到在外部组件中正确初始化了externalObject（我可以看到outerObject.address.street很好），表单的街道输入也没有初始值。

（2）如果我在该表单输入中键入任何内容，则会出现错误：

[Vue警告]：v-on处理程序中的错误：“ TypeError：无法读取属性 “值”未定义”

唯一出现的“值”是相对于输入的引用。但是据我了解，value是输入（以及$event.target）的属性。我尝试过将价值更改为街道和各种排列，但到目前为止，我的猜测都是错误的。

我的目标是使表单组件的输入与父项上的outerObject之间具有“双向绑定”，因此，当用户在表单上执行编辑时，outerObject会发生变化。我在做什么错了？

Answer 1

使用以下策略实现双向绑定：

将value添加为props数组之一。
在组件内部的输入字段上添加v-on:change。
更改后，您应按照this.$emit('input', newValue)发出更改。

现在您可以使用组件：<address-comp v-model='outerObject.address'></address-comp>

如何将Vue表单构建为组件

1 个答案: