Как v-модель 2 значения?

Question

Я использовал компонент buefy <b-autocomplete>, и есть одно свойство с именем v-model, которое связывает значения с полем ввода

Теперь я хочу привязать полное имя к полю, но данные состоят из list[index].first_name и list[index].last_name, а index из цикла v-for.

Поскольку v-model не может связать функцию (у нее есть определенный индекс, поэтому я не могу просто конкатенировать ее на computed, а затем передать ее), так что это либо v-model="list[index].first_name", либо v-model="list[index].last_name"

Как мне связать этих двоих?

Answer 1

Я не уверен, что получу вопрос, но я предполагаю, что у вас есть список имен и фамилий, и вы хотите дать возможность пользователю изменять эти свойства списка. Подробнее См. пример в действии

HTML-часть

<div id="app">
  <template v-for="item in list" :key="list.id">
    <input type="text" :value="item.name" @input="changeList($event, item.id, 'name')">
    <input type="text" :value="item.last_name" @input="changeList($event, item.id, 'last-name')">
    Your full name is {{item.name}} {{item.last_name}}
    <hr>
  </template>
</div>

Часть "javascript (vue)"

new Vue({
  el: "#app",
  data: {
    list: [
      { id: 1, name: "name1", last_name: 'last_name 1' },
      { id: 2, name: "name2", last_name: 'last_name 2' },
      { id: 3, name: "name3", last_name: 'last_name 3' },
      { id: 4, name: "name4", last_name: 'last_name 4' }
    ]
  },
  methods: {
    changeList(event, id, property) {
        let value = event.target.value

      for (item of this.list) {
        if (item.id === id) {
            if(property === 'name') {
            item.name = value
          }else if (property === 'last-name') {
            item.last_name = value
          }
        }
      }
    }
  }
})

Answer 2

Как уже было сказано, вы не можете использовать 2 значения в v-model
Но если вы хотите использовать <b-autocomplete>, это значит, что у вас уже есть данные, и вы можете вычислить их любым способом.

Если у вас есть массив пользовательских объектов (например, с именем и фамилией), вы можете сделать что-то вроде:

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

и используйте этот новый массив в filteredDataArray (из примера автозаполнения Buefy )

Пример скрипки здесь

Answer 3

Вам нужно вычислить значение для полного имени, и вы можете 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>