Динамические параметры с помощью компонентов VueJS Bootstrap Select
Документация 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 и серверным API, мы не будем вдаваться во все эти настройки и рассмотрим только этот конкретный случай.
Пример того, как все это будет работать (на данный момент с использованием жестко закодированных опций):
- Пример select — у нас есть динамический список размеров рубашки в зависимости от критериев, возвращаемых нашим серверным 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()
},
...
Когда вы скомпилируете, вы увидите, что выпадающий список правильно загружает параметры. Таким образом, этот базовый фрагмент дает вам общее представление о том, как загружать динамические параметры. Теперь, чтобы сделать их динамическими.
Предполагая, что у вас есть свои аксиомы или какие-либо другие настройки, вы можете называть их как хотите. Данные, которые я возвращаю из этого 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. Вы могли бы сделать это по-другому, но вы поняли идею.
Это довольно быстро и грязно. Это можно было бы очистить с помощью большего количества проверок — например. убедитесь, что параметры Value и Text были добавлены перед отправкой в объект массива shirtSizeOptions, чтобы вы не помещали пустые/неопределенные значения.
Я не эксперт в Javascript или VueJS, поэтому может быть более чистый метод, но после поиска в StackOverflow и других местах я обнаружил отсутствие четких примеров из прямого вызова API -> Загрузка данных параметров с помощью VueJS Bootstrap.
