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

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

您需要一个计算全名的可设置值，您可以对其进行 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>

Answer 2

我不确定我是否明白这个问题，但我假设您有一个姓名和姓氏列表，并且您希望用户能够更改列表的这些属性。有关更多信息请参阅实际示例

“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 3

正如所说，你不能在

v-model

中使用 2 个值 但如果您想使用

<b-autocomplete>

，则意味着您已经拥有数据，并且可以以任何您想要的方式计算它。

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

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

并在

filteredDataArray

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

这里是小提琴示例

Answer 4

这可能是一个老问题，但这里的答案可能会对 Vue 框架的新手有所帮助。使用 Vue 3，可以为单个组件定义 1 个以上的 v 模型，甚至 Vue 3.4 也提供了一种使用

defineModel

定义自定义 v 模型的更简洁的方法。检查以下代码：

<script setup>
  const firstName = defineModel('firstName')
  const lastName = defineModel('lastName')
</script>

<template>
  <input type="text" v-model="firstName" />
  <input type="text" v-model="lastName" />
</template>

用途：

<UserName
  v-model:first-name="first"
  v-model:last-name="last"
/>

来源：Vue 文档