如何对2个值进行v建模?

问题描述

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

I was using buefy <b-autocomplete> component and there is one property called v-model which is binding values to the input field

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

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"

Since v-model cannot bind a function (it has specific index so I cannot just concat it on computed then pass it on) so it's either v-model="list[index].first_name" or v-model="list[index].last_name"

我如何使其绑定这两个?

How do I make it bind's these two?

推荐答案

您需要为全名计算一个可设置的表，并且可以对其进行v建模.您只需要决定一个规则，确定多余的空间在哪里以及如果没有空间该怎么办.

You need a settable computed for full name, and you can v-model that. You just have to decide on a rule for where extra spaces go and what to do if there is no space.

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>

这篇关于如何对2个值进行v建模?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！