javascript - Vue - 使用 v-bind 和 props 对选择元素进行两种方式绑定(bind)

Question

我有一个子组件:

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

我在这里错过了什么？

Answer 1

e.target 是一个 DOM 值，e.target.value 是一个字符串。这就是它以 [object Object] 形式出现的原因，这就是将对象转换为字符串时得到的结果。

当您使用 v-model 时，Vue 在存储实际 javascript 对象的元素上查找不同的属性。

既然如此，只需在您的组件中使用 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);
    },
  }  
})

如评论中所述，此选项有一点限制，但是，当从外部设置值时，更改不会反射(reflect)在组件内部。所以让我们解决这个问题。

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>