如何動態設置v-select值？

我Vuetify v-select元素看起來是這樣的：如何動態設置v-select值？

<v-select 
    v-bind:items="languages" 
    v-model="setLocale" 
    label="Language:" 
    auto prepend-icon="map" 
    item-value="fetchedLocale" 
    hide-details 
    id="langSelect" 
    >

在data你可以找到：

data() { 
    return { 
    languages: [ 
     { shortCode: 'en', text: 'English' }, 
     { shortCode: 'pl', text: 'Polski' }, 
     { shortCode: 'es', text: 'Español' }, 
     { shortCode: 'pt', text: 'Portugues' } 
    ], 
    fetchedLocale: '', 
    setLocale: null 
    } 
}, (...)

一些處理之後，fetchedLocale從陣列中得到的一些text屬性值之上，例如「葡萄牙語」。

問題：如何更新v-select，使其設置fetchedLocale的值，如前面提到的「Portugues」，加載DOM元素時，而不是設置默認空值？

來源

2017-09-22 AbreQueVoy

你試過'v-bind：item-value =「fetchedLocale」'？ – Bert

@Bert：是的，但沒有成功。顯示默認值。 – AbreQueVoy

As per the documentation，item-value prop定義要用作每個項目的值的屬性名稱。此道具的默認值爲'value'，這意味着默認情況下，每個項目的value屬性將用作每個項目的值。例如，如果您將其設置爲text，則將使用您的每個languages的text屬性作爲該項目的值。但是，這不會實際設置選擇組件的值。

您已通過v-model將選定組件的值限制爲setLocale。所以，如果你想選擇組件的值更改爲fetchedLocale值，只需用的fetchedLocale值更新setLocale和組件將更新：

this.setLocale = this.fetchedLocale

這裏有一個工作示例：

new Vue({ 
 
    el: '#app', 
 
    data() { 
 
    return { 
 
     languages: [ 
 
     { shortCode: 'en', text: 'English' }, 
 
     { shortCode: 'pl', text: 'Polski' }, 
 
     { shortCode: 'es', text: 'Español' }, 
 
     { shortCode: 'pt', text: 'Portugues' } 
 
     ], 
 
     fetchedLocale: '', 
 
     setLocale: null 
 
    }; 
 
    }, 
 
    created() { 
 
    setTimeout(() => { 
 
     this.fetchedLocale = 'English'; 
 
     this.setLocale = this.fetchedLocale; 
 
    }, 1000); 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script> 
 
<script src="https://unpkg.com/[email protected]/dist/vuetify.js"></script> 
 
<link href="https://unpkg.com/[email protected]/dist/vuetify.min.css" rel="stylesheet"/> 
 
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css"> 
 

 
<div id="app"> 
 
    <v-app> 
 
    <v-select 
 
     :items="languages" 
 
     v-model="setLocale"  
 
     label="Language:" 
 
     auto prepend-icon="map" 
 
     item-value="text" 
 
     hide-details 
 
     id="langSelect" 
 
    ></v-select> 
 
    </v-app> 
 
</div>

來源

2017-09-22 17:12:50 thanksd

如何動態設置v-select值？

回答

相關問題