如何对 2 值进行 v-model？

Question

我正在使用 buefy <b-autocomplete> 组件，并且有一个名为 v-model 的属性将值绑定到输入字段

now I wanna bind Full Name into the field but the data consist with list[index].first_name and list[index].last_name , and the index is from a v-for loop .

由于 v-model 不能绑定函数（它有特定的索引，所以我不能将它连接到 computed 然后传递它）所以它要么是 v-model="list[index].first_name" 要么 v-model="list[index].last_name"

我如何让它绑定这两个？

原文由 Travis Su 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要一个为全名计算的可设置，您可以对其进行 v-model 。你只需要决定一个规则，额外的空间去哪里，如果没有空间怎么办。

 new Vue({
  el: '#app',
  data: {
    firstName: 'Joe',
    lastName: 'Smith'
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName} ${this.lastName}`;
      },
      set(newValue) {
        const m = newValue.match(/(\S*)\s+(.*)/);

        this.firstName = m[1];
        this.lastName = m[2];
      }
    }
  }
});

 <script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  First: {{firstName}}<br>
  Last: {{lastName}}<br>
  Full Name: <input v-model="fullName">
</div>

原文由 Roy J 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

据说你不能在 v-model 中使用 2 个值

但是如果你想使用 <b-autocomplete> 这意味着你已经有了数据，你可以用任何你想要的方式计算它。

如果您有一组用户对象（例如名字和姓氏），您可以执行以下操作：

 data() {
  return {
    users: [
      //...
    ],
    computedUsers: [],
  }
},
mounted() {
  this.users.forEach(user => {
    this.computedUsers.push(user.firstname + ' ' + user.lastname)
  })
}

并在 filteredDataArray 中使用这个新数组（来自 Buefy 自动完成示例）

小提琴示例在这里

原文由 Sovalina 发布，翻译遵循 CC BY-SA 4.0 许可协议