如何 v-model 2 值？

Question

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

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

由于v-model不能绑定功能（它有具体的指标，所以我不能只是Concat的它computed，然后把它传递），所以它要么v-model="list[index].first_name"或v-model="list[index].last_name"

我如何使它绑定这两个？

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>