Динамични опции с VueJS Bootstrap Select Components
Документацията на VueJS Bootstrap Form Select Component показва само опции за твърдо кодирани стойности.
В повечето случаи ще работите със сайт, където вашите опции ще се извикват динамично. Намерих редица примери, при които се предполага, че вашите API данни съвпадат с вашите опции — т.е. връщаща двойка стойност/текст. Но в действителност най-вероятно ще извиквате крайна точка, която връща нещо като:
{"id":1,"name":"sm","full_name":"Small","deleted_at":null,"created_at":"2019-01-01-16:11:49","updated_at":"2019-01-01-16:11:49"}
Което е общ ::all() от нещо като laravel. Искаме да преведем това в: {“value”:”1,”text”:”sm”} и т.н., така че да се зарежда правилно в нашите опции.
Ако приемем, че имате работещ сайт с VueJS и VueBootstrap и backend API, така че няма да навлизаме в цялата тази настройка и просто ще разгледаме този конкретен случай.
Пример за това как всичко това ще работи (използвайки твърдо кодирани опции за момента):
- Примерен избор — смятаме, че имаме динамичен списък с размери на ризи в зависимост от критериите, които връща нашия API в задната част:
<b-form-select name="shirtSize" id="shirtSize" :options="shirtSizeOptions"> <template v-slot:first> <option value="" disabled>- Select Size -</option> </template> </b-form-select>
2)Определете вашите данни за опции:
export default {
data () {
return {
shirtSizes: [],
shirtSizeOptions: [],
}
},
....
}
3) Използване на твърдо кодирана версия, за да ви покаже как в крайна сметка ще работи:
methods: {
setShirtSizeOptions: function () {
var options = [
{ value: "1", text: "Small" },
{ value: "2", text: "Medium" },
{ value: "3", text: "Large" }
]
for(var i = 0; i < options.length; i++){
this. shirtSizeOptions.push(options[i])
}
}
}
4) Заредете опциите за размер на ризата
...
created (){
this.setShirtSizeOptions()
},
...
Когато компилирате, ще видите падащото меню да зарежда правилно опциите. Така че този основен фрагмент ви дава общата представа как да зареждате динамични опции. Сега да ги направим динамични.
Ако приемем, че имате своя axios или каквато и да е настройка, така че можете да го наричате както желаете. Данните, които връщам от този api, почти съответстват на този формат (бекендът е Laravel):
{"id":1,"name":"sm","full_name":"Small","deleted_at":null,"created_at":"2019-01-01-16:11:49","updated_at":"2019-01-01-16:11:49"}
5) Дефинирайте как ще зареждаме нашите опции динамично:
methods: {
setShirtSizeOptions: function () {
this.$http.get('/api/shirt-sizes')
.then(resp => {
this.shirtSizes = resp.data
for(var i = 0; i < this.shirtSizes.length; i++){
var option = []
for(var key in this.shirtSizes[i]){
if(key == "id"){
option["value"] = this.shirtSizes[i][key]
}else if(key == "full_name"){
option["text"] = this.shirtSizes[i][key]
}
}
this. shirtSizeOptions.push(Object.assign({},option))
}
})
.catch(err => {
console.log(err)
})
}
}
Този пример поставя нашите опции в масив, след което преобразува в Javascript обект, преди да натисне стойността на shirtSizeOptions. Бихте могли да го направите по различен начин, но схващате идеята.
Това е доста бързо и мръсно. Може да се изчисти с повече проверки - напр. уверете се, че опциите за стойност и текст са добавени, преди да натиснете към обекта на масива shirtSizeOptions, така че да не поставяте празни/недефинирани стойности.
Не съм експерт по Javascript или VueJS, така че може да има по-чист метод, но след търсене в StackOverflow и други места открих липса на ясни примери от директно извикване на API -› Зареждане на данни с опции с VueJS Bootstrap.
