javascript - Vue - Two way binding for select element using v-bind and props - Stack Overflow

admin管理员组

文章数量:1391999

I have a child ponent:

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

The above one works fine.

---

But I want to make the value of <select> depends on the parent.

So I do the following:

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

Where parent will catch the event and change selectedItem.

But this doesn't work. e.target.value will be something like [object Object].

What am i missing here?

I have a child ponent:

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

The above one works fine.

---

But I want to make the value of <select> depends on the parent.

So I do the following:

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

Where parent will catch the event and change selectedItem.

But this doesn't work. e.target.value will be something like [object Object].

What am i missing here?

• javascript
• html
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Jul 14, 2017 at 6:48 Nakamura asked Jul 14, 2017 at 3:00 NakamuraNakamura 1,04122 gold badges1313 silver badges2323 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

e.target is a DOM value, and e.target.value is a string. That's why it es out as [object Object], which is what you get when you convert your object to a string.

When you use v-model Vue looks for a different property on the element where it has stored the actual javascript object.

That being the case, just use v-model inside your ponent.

Vue.ponent("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);
    },
  }  
})

As mentioned in the ments, this option is a little limited, however, in that when the value is set from the outside, the change is not reflected inside the ponent. So lets fix that.

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

Here, we pass the options into the ponent, and use a puted property with v-model to emit changes. Here is a working example.

console.clear()

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

Vue.ponent("custom-select",{
  props: ['value', "options"],
  template:`
    <select v-model="selected">
      <option v-for="option in options" :value="option">{{option.id}}</option>
    </select>
  `,
  puted: {
    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./[email protected]/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>

本文标签： javascriptVueTwo way binding for select element using vbind and propsStack Overflow