How to v-model 2 values?

问题

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

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.

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?

回答1:

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:

I am not sure if i get the question,but i am assuming that you have a list of names and last names and you want to give the ability to user to change those proprties of list.For more See the example in action

The "html" part

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

The "javascript(vue)" part

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
          }
        }
      }
    }
  }
})

回答3:

As it's been said you can't use 2 values in v-model
But if you want to use <b-autocomplete> that means you already have the data and you can compute it in any way you want.

If you have an array of user objects (with firstname and lastname for example) you can do something like:

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

and use this new array in the filteredDataArray (from the Buefy autocomplete example)

Fiddle example here

来源：https://stackoverflow.com/questions/50260374/how-to-v-model-2-values

标签

html

Vue.js

vuejs2