v-model 2 값은 어떻게 합니까?

v-model 2 값은 어떻게 합니까?

나는 buefy를 쓰고 있었다.<b-autocomplete>컴포넌트라는1개의 속성이 있습니다.v-model이것은 입력 필드에 값을 바인딩하는 것입니다.

이제 Full Name을 필드에 바인딩하고 싶지만 데이터는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"

어떻게 하면 이 둘을 묶을 수 있을까?

전체 이름에 대해 계산된 설정 가능한 이름이 필요하며 이를 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>

질문을 받을 수 있을지 모르겠지만, 이름과 성 리스트가 있고, 사용자가 그 리스트를 변경할 수 있도록 권한을 부여하고 싶다고 생각합니다.자세한 내용은 사용 예를 참조하십시오.

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

지금까지 말한 바와 같이 2개의 값을 사용할 수 없습니다.v-model
하지만 만약 당신이 그것을 사용하고 싶다면<b-autocomplete>즉, 이미 데이터가 있고 원하는 방식으로 데이터를 계산할 수 있습니다.

사용자 객체 배열(예: 이름 및 성)이 있는 경우 다음과 같은 작업을 수행할 수 있습니다.

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

이 새로운 어레이를 사용하여filteredDataArray(Buefy 자동 완성 예에서)

여기서의 바이올린 예

언급URL : https://stackoverflow.com/questions/50260374/how-to-v-model-2-values