Question

这是我的孩子部分的样本 HTML：

<div v-for="(input, index) in form.inputs" :key="index">
  <div>
    <input :name"input.name" :type="input.type" />
  </div>
</div>

JavaScript（Vue）：

<script>
  export default {
    name: "child",
    props: ['parentForm'],
    data() {
      return {
        form: {
          inputs: [
            {
              name: 'name',
              type: 'text'
          ],
          [...]
        }
      }
    }

和根成分样本 HTML：

<child :parentsForm="form"></child>

JavaScript（Vue）：

<script>
  import child from "./child";

  export default {
    name: "root",
    components: { child },
    data() {
      return {
        form: {
          data: {
            name: null,
            email: null,
            ...
          }
      }
    }

问题是，如何实现root + v-for的组合？

示例我想以这种方式使用子组件

<input :name"input.name" :type="input.type" v-model="parentForm.data . input.name" />

因为parentForm.data将绑定form：data：{，这将是从input.name获取的变量}

v模型的输出应在根组件上绑定form.data.name或form.data.email

谢谢

Answer 1

您可以按照以下说明使用它，

<input :name="input.name" :type="input.type" v-model="parentForm.data[input.name]" />

这会将parentForm.data.name的{{1}}绑定到input.name = 'name'。

Answer 2

如果我对您的理解正确，则希望从子组件中更新父数据。如果是，那么您有两个选择。

在您的子组件中，使用$parent.form.data进行绑定。
或者您也可以将其传递给prop子级的data属性。将此新数据属性绑定到您的孩子中，并在进行任何更改时emit对其进行绑定。在您的父级中收到此emit并分别更新父级属性（推荐）

将vue道具与v-for结合使用

2 个答案: