如何构建一个 vue 表单作为组件答案

【问题标题】：How to build a vue form as a component如何构建一个 vue 表单作为组件
【发布时间】：2019-02-26 16:27:38
【问题描述】：

我想制作一个允许用户创建或编辑邮寄地址的 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) 即使我可以看到 outerObject 在父组件中正确初始化（我可以看到 outerObject.address.street 就好了），表单的街道输入没有初始值。

(2) 如果我在该表单输入中输入任何内容，我会收到错误：

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

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

我的目标是在表单组件上的输入和父级上的outerObject 之间进行“双向绑定”，因此当用户在表单上执行编辑时，outerObject 会更改。我做错了什么？

【问题讨论】：

尝试将address="" 更改为v-bind:address=""，因为您传入的是对象引用，而不是字符串。
谢谢。这解决了第一个问题，但是在输入输入时我仍然收到有关“值”的错误。

标签： javascript vue.js vue-component

【解决方案1】：

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

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

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

【讨论】：

我完全按照这些步骤，所以现在组件道具是['address'，'value']，将v-on:input...更改为v-on:change="this.$emit('input', newValue)"，并将地址道具更改为v-model建议在父组件上。现在我收到错误“无法读取未定义的属性街道”
您不再需要 address 属性，并且发出的第二个参数应该是文本字段的更改值，即 $event.target.value。