如何獲得VueJS

Question

從組件數據

我有以下組成部分：

組件

<template> 
<div> 
    <label class="typo__label">Single selecter</label> 
    <multiselect v-model="value" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"></multiselect> 
</div> 
</template> 

<script> 
import Multiselect from 'vue-multiselect' 

export default { 
    components: { 
    Multiselect 
    }, 
    data() { 
    return { 
     value: '', 
     options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched'] 
    } 
    } 
} 
</script> 

我使用它在我的網頁像這樣：

<p id="app-two"> 
    <dropdown></dropdown> 
    @{{ value }} 
    @{{ message }} 
</p> 

<script> 
    new Vue({ 
    el: '#app', 
    data: { 
     message: 'Test message' 
    } 
}); 
</script> 

當我運行該頁面，@ {{message}}顯示「測試消息」，但@ {{value}}爲空。 我可以在VueJS Dev Tools中看到更新下拉組件的值，但它不會顯示在頁面上。我如何訪問我的vue元素中的組件數據？像@ {{dropdown.value}}

Answer 1

<template> 
    <div> 
     <label class="typo__label">Single selecter</label> 
     <multiselect v-model="internalValue" :options="options" :searchable="false" :close-on-select="false" :show-labels="false" placeholder="Pick a value"> </multiselect> 
    </div> 
</template> 

<script> 
    import Multiselect from 'vue-multiselect' 

    export default { 
     components: { 
     Multiselect 
     }, 
     props: ['value'], 
     data() { 
     return { 
      internalValue: this.value, 
      options: ['Select option', 'options', 'selected', 'mulitple', 'label', 'searchable', 'clearOnSelect', 'hideSelected', 'maxHeight', 'allowEmpty', 'showLabels', 'onChange', 'touched'] 
     } 
     }, 
     watch:{ 
     internalValue(v){ 
      this.$emit('input', v); 
     } 
     } 
    } 
</script> 

，並在頁面

<p id="app-two"> 
    <dropdown v-model="selectedValue"></dropdown> 
    @{{ selectedValue}} 
    @{{ message }} 
</p> 

<script> 
    new Vue({ 
    el: '#app', 
    data: { 
     selectedValue: null 
     message: 'Test message' 
    } 
}); 
</script> 

Here is an example，不使用多選，但實現了v-model支持的自定義組件。