Vue - v-bind 및 소품을 사용한 선택 요소에 대한 양방향 바인딩

Vue - v-bind 및 소품을 사용한 선택 요소에 대한 양방향 바인딩

자식 구성 요소가 있어:

select(v-model="selectedItem", @change="emitChange")
  option(:value="{id: '123', value: 'foo'}") 123
  option(:value="{id: '456', value: 'bar'}") 456

---

data: {
  selectedItem: '',
},
methods: {
  emitChange() {
    this.$emit('change', this.selectedItem);
  },
}

위의 것은 잘 작동한다.

---

하지만 나는 그 가치를 만들고 싶다.<select>부모에게 의존한다.

그래서 나는 다음을 한다.

select(:value="selectedItem", @change="emitChange")
  option(:value="{id: '123', value: 'foo'}") 123
  option(:value="{id: '456', value: 'bar'}") 456

---

props: ['selectedItem'],
methods: {
  emitChange(e) {
    this.$emit('change', e.target.value);
  },
}

상위 항목이 이벤트를 포착하고 변경되는 위치selectedItem.

하지만 이것은 효과가 없다. e.target.value같은 것이 될 것이다.[object Object].

내가 뭘 놓쳤지?

e.targetDOM 값이며e.target.value끈이다.그래서 로 나오는 것이다.[object Object], 그것은 당신이 당신의 사물을 문자열로 변환할 때 얻는 것이다.

사용할 때v-modelVue는 실제 자바스크립트 객체를 저장한 요소에서 다른 속성을 찾는다.

그렇긴 하지만 그냥 사용해.v-model컴포넌트 내부에.

Vue.component("custom-select",{
  props: ['selectedItem'],
  template:`
    <select v-model="selected" @change="emitChange">
      <option :value="{id: '123', value: 'foo'}">123</option>
      <option :value=" {id: '456', value: 'bar'}">123</option>
    </select>
  `,
  data(){
    return{
      selected: this.selectedItem,
    }
  },
  methods: {
    emitChange(e) {
      this.$emit('change', this.selected);
    },
  }  
})

논평에서 언급했듯이, 이 옵션은 약간 제한적이지만, 외부에서 값을 설정할 때 변경사항이 구성요소 내부에 반영되지 않는다는 점에서 제한적이다.그러니 그걸 고쳐보자.

Vue.component("custom-select",{
  props: ['value', "options"],
  template:`
    <select v-model="selected">
      <option v-for="option in options" :value="option">{{option.id}}</option>
    </select>
  `,
  computed: {
    selected: {
      get(){ return this.value },
      set(v){ this.$emit('input', v) }
    }
  }  
})

여기서는 옵션을 구성 요소에 전달하고 다음 구성 요소와 함께 계산된 속성을 사용하십시오.v-model변화를 일으키기 위해서.여기 일하는 예가 있다.

console.clear()

const options = [
  {id: '123', value: 'foo'},
  {id: '456', value: 'bar'}
]

Vue.component("custom-select",{
  props: ['value', "options"],
  template:`
    <select v-model="selected">
      <option v-for="option in options" :value="option">{{option.id}}</option>
    </select>
  `,
  computed: {
    selected: {
      get(){ return this.value },
      set(v){ console.log(v); this.$emit('input', v) }
    }
  }  
})

new Vue({
  el:"#app",
  data:{
    selectedItem: null,
    options
  }
})

<script src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<div id="app">
  <custom-select v-model="selectedItem" :options="options"></custom-select>
  <div>
    Selected value: {{selectedItem}}
  </div>
  <button @click="selectedItem = options[0]">Change from parent</button>
</div>

참조URL: https://stackoverflow.com/questions/45093887/vue-two-way-binding-for-select-element-using-v-bind-and-props