Vue.js v-model 输入值并填充现有数据答案

【问题标题】：Vue.js v-model input value and populate existing dataVue.js v-model 输入值并填充现有数据
【发布时间】：2020-02-06 10:11:16
【问题描述】：

我在一个数组中有一些数据，我想在循环时从输入中填充这些数据。

如果我愿意，还可以添加更多输入。我没有收到任何错误，但没有填充数据。

我的脚本：

data() {
  return {
     meta: []
  }
}

我的模板：

<div class="field" v-for="(meta, index) in data.meta" : key="index">
  <input : v-model="data.meta[index]" name="type" class="form-control shadow-btn" />
</div>
<a href="javascript:void(0)" @click="addInput" > add</a >

我错过了什么？

【问题讨论】：

查看您的代码，:v-model="data.meta[index]" 应该与:v-model="meta" 相同。另外，请记住，使用索引作为键可能会产生问题，因为列表中元素的索引可能会发生变化（如果它们在数组中的位置发生变化）
那么我应该改变我的数据库结构来接受对象还是你有什么建议？

标签： vue.js v-model

【解决方案1】：

您的模板需要这样显示：

<div class="field" v-for="(m, index) in meta" :key="index"> <input :v-model="m" name="type" class="form-control shadow-btn" /> </div>

【讨论】：

【解决方案2】：

试试这个方法！

new Vue({
    el:"#app",
    data: {
        meta:['Meta 1','Meta 2']
    },
    methods: {
        addInput(){
            alert("Do something!");
        }
    },
});

<!DOCTYPE html>
<html lang="en">
<head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="field" v-for="(m, index) in meta" :key="index">
            <input :value="m" name="type" class="form-control shadow-btn" />
        </div>
        <a href="javascript:void(0)" @click="addInput">add</a>
    </div>
</body>
</html>

【讨论】：