ヴュー - V-バインドや小道具

Question

を使用してselect要素のバインディングつの方法は、私が子供のコンポーネントがあります。

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>の値を親に依存させたいと思っています。

は、だから私は、次の手順を実行します。親がイベントをキャッチし、selectedItemを変更します

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

。

しかし、これは機能しません。 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); 
    }, 
    } 
}) 

は、このオプションは、変更は、コンポーネントの内部に反映されない、という点で、しかし、多少制限されます。だからそれを修正してください。ここ

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>