如何绑定对象的动态输入框数组

Question

有我的数据。

{
  "columns":[ "first_name", "last_name", "email", "country", "age", "gender" ],
  "peoples":[
    {
      "first_name":"Anik",
      "last_name":"Datta",
      "email":"aunik@mail.me",
      "custom_fields":{
        "age":17,
        "gender":"male"
      }
    },
    {
      "first_name":"John",
      "last_name":"Doe",
      "email":"john@mail.me",
      "custom_fields":{

      },
     {
      "first_name":"John",
      "last_name":"Doe",
      "email":"john@mail.me",
      "custom_fields":{
        "age": 22
      }
    }
  ]
}

我想像这样在文本框中显示这些， 标签将是列中的数据，下面将有文本框填充来自“peoples”键的数据。

first_namelast_nameemailcountryagegender 文本框出现在下列列名下方。

模板：

<div class="peoples">
  <h5>Peoples</h5>
  <div class="row">
    <div v-for="column in columns"
      :class="`col-${Math.ceil(12/columns.length}`">
      <label>{{$t(column)}}</label>
      <app-input
        :key="index"
        :name="column + index"
        :id="column + index"
        v-for="(contacts, index) in peoples"
        :value="setFieldValues(contacts, column)"
        />
    </div>
  </div>
</div>

脚本：

    data() {
            return {
                contacts: [],
            }
        },

        methods: {

            setFieldValues(contacts, column) {

                if (contacts['custom_fields'][column] !== undefined) {
                     return contacts['custom_fields'][column];
                }
                if (contacts[column] !== undefined) {
                    return contacts[column];
                }
            }
        },

它可以很好地填充数据，但是在控制台中显示61个错误，因为没有与数据的2路绑定。 在这种情况下如何在数据中绑定这些动态字段？

Answer 1

这可能会有所帮助，请将模板更改为：

<template v-for="(contacts, index) in peoples">
    <template v-if="contacts['custom_fields'][column] !== undefined">
        <app-input
            :key="index"
            :name="column + index"
            :id="column + index"
            v-for="(contacts, index) in peoples"
            v-model="contacts['custom_fields'][column]"
        />
    </template>
    <template v-else-if="contacts[column] !== undefined">
        <app-input
            :key="index"
            :name="column + index"
            :id="column + index"
            v-for="(contacts, index) in peoples"
            v-model="contacts[column]"
        />
    </template>
</template>

我没有尝试代码，但它应该给你的想法

Answer 2

您可以使用 v-model 进行双向数据绑定。请参阅此示例（我对您的代码进行了一些修改以使其可运行）。

new Vue({
  el: "#app",
  data: {
    "columns": ["first_name", "last_name", "email", "country", "age", "gender"],
    "peoples": [{
        "first_name": "Anik",
        "last_name": "Datta",
        "email": "aunik@mail.me",
        "custom_fields": {
          "age": 17,
          "gender": "male"
        }
      },
      {
        "first_name": "John",
        "last_name": "Doe",
        "email": "john@mail.me",
        "custom_fields": {

        }
      },
      {
        "first_name": "John",
        "last_name": "Doe",
        "email": "john@mail.me",
        "custom_fields": {
          "age": 22
        }
      }
    ]
  }
})

.row {
  display: flex;
}

input {
  margin-bottom: 0.3em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id='app'>
  <div class="peoples">
    <h5>Peoples</h5>
    <div class="row">
      <div v-for="column in columns" :class="`col-${Math.ceil(12/columns.length)}`">
        <label>{{column}}</label>
        <input :key="index" :name="column + index" :id="column + index" v-for="(contacts, index) in peoples" v-model="contacts[column]" />
      </div>
    </div>
    {{peoples}}
  </div>
</div>