Vuejs：多输入中的v模型数组

wko9yo5t 于 2023-01-31 发布在 Vue.js

关注(0)|答案(3)|浏览(121)

我有一个附加了v-model的输入文本字段，每当有人点击"Add"按钮时，另一个附加了相同v-model的输入文本就会被添加到DOM中。我以为我会得到一个v-model值的数组，但它只得到了第一个v-model输入的值：

<div id="app">
  <div id="references">
    <input v-model="references" type="text">
  </div>
  <button @click="addReference">Add</button>
</div>

我附加到dom的html由addReference方法触发：

addReference: function(e) {
  e.preventDefault();
  console.log(this.references);
  var inputEl = '<input v-model="references" type="text">';
  $('#references').append(inputEl);
}

这是Vue.js做不到的吗？有没有一种不同的方法可以用Vue.js从动态dom元素中收集值？
一个一个二个一个一个一个三个一个一个一个一个一个四个一个

vue.js

来源：https://stackoverflow.com/questions/34825065/vuejs-v-model-array-in-multiple-input

3条答案

按热度按时间

carvr3hs1#

您正在考虑DOM，这是一个很难打破的习惯，Vue建议您首先使用数据。
在您的具体情况下，这有点难以判断，但我可能会使用v-for，并创建一个finds数组，以便在需要更多时推送。
下面是我如何设置示例：

new Vue({
  el: '#app',
  data: {
    finds: []
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: '' });
    }
  }
});

下面是我的模板设置：

<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value" :key="index">
  </div>
  <button @click="addFind">
    New Find
  </button>
</div>

尽管如此，我还是会尝试使用index以外的东西来代替key。
下面是上面的一个演示：https://jsfiddle.net/crswll/24txy506/9/

赞(0）回复(0）举报 2023-01-31

eivgtgni2#

如果您询问如何在vue2中执行此操作，并设置插入和删除选项，请查看js fiddle

new Vue({
  el: '#app',
  data: {
    finds: [] 
  },
  methods: {
    addFind: function () {
      this.finds.push({ value: 'def' });
    },
    deleteFind: function (index) {
      console.log(index);
      console.log(this.finds);
      this.finds.splice(index, 1);
    }
  }
});

<script src="https://unpkg.com/vue@2.5.3/dist/vue.js"></script>
<div id="app">
  <h1>Finds</h1>
  <div v-for="(find, index) in finds">
    <input v-model="find.value">
    <button @click="deleteFind(index)">
      delete
    </button>
  </div>
  
  <button @click="addFind">
    New Find
  </button>
  
  <pre>{{ $data }}</pre>
</div>

赞(0）回复(0）举报 2023-01-31

brc7rcf03#

下面是上面的一个演示：https://jsfiddle.net/sajadweb/mjnyLm0q/11

new Vue({
  el: '#app',
  data: {
    users: [{ name: 'sajadweb',email:'sajadweb@outlook.com' }] 
  },
  methods: {
    addUser: function () {
      this.users.push({ name: '',email:'' });
    },
    deleteUser: function (index) {
      console.log(index);
      console.log(this.finds);
      this.users.splice(index, 1);
      if(index===0)
      this.addUser()
    }
  }
});

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <h1>Add user</h1>
  <div v-for="(user, index) in users">
    <input v-model="user.name">
    <input v-model="user.email">
    <button @click="deleteUser(index)">
      delete
    </button>
  </div>
  
  <button @click="addUser">
    New User
  </button>
  
  <pre>{{ $data }}</pre>
</div>

赞(0）回复(0）举报 2023-01-31

我来回答

Vuejs：多输入中的v模型数组

3条答案

相关问题

热门标签

最新问答