html - 如何 v-model 2 值？

Question

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

现在我想将全名绑定(bind)到字段中，但数据包含 list[index].first_name和 list[index].last_name , 和 index来自v-for环形。

自 v-model不能绑定(bind)一个函数(它有特定的索引所以我不能只在 computed 上连接它然后传递它)所以它要么是 v-model="list[index].first_name"或 v-model="list[index].last_name"

如何让它绑定(bind)这两个？

Answer 1

您需要一个可设置的全名计算，您可以对其进行 v 建模。您只需决定一个规则，确定额外空间的去向以及如果没有空间该怎么办。

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>