Question

我正在尝试构建一个简单的Vue.js SPA，使用户能够在v-for循环中的各个输入字段中呈现输入的值。到目前为止，我已经设置了实例，以将一些硬编码值返回到循环中的输入字段（项目：[{name：'John'}，{name：'James'}]），但是我想动态输入其他值，并将这些值呈现在新的单个输入字段中。我试图通过添加一个将输入的值推入item数组的函数来实现此目的，但是我没有生成带有值的新输入字段，而是仅获取空的输入字段。问题是我不确定如何将新值分配给数组内的“ name：”，以便在各个输入字段中将它们分配给它们。关于如何解决此问题的任何建议？请参阅下面的代码。谢谢！

<template>
  <div id="app">
    <input v-model="newInput"/>
    <button @click="addItem()">add</button>
    <div v-for="list in item">
        <input type="text" v-model="list.name" />
        {{list.name}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      newInput: '',
      item: [{ name: 'John' },{ name: 'James' }]
    }
  },
  methods: {
    addItem() {
      this.item.push(this.newInput);
    }
  }
}
</script>

Answer 1

在addItem方法中，字符串（this.newInput）被推到数组。您应该推送对象，而不是像数组中的其他对象那样结构化：

addItem() {
  this.item.push({ name: this.newInput });
}

如何将动态输入值绑定到Vue.js中的v-for输入字段

1 个答案: