Frontend Vue.js получение данных из файла или переменной

Question

Есть такой селект:

<select multiple size="5">
    <option value="1">Manufacturing</option>
    <option value="19">&nbsp;&nbsp;&nbsp;&nbsp;Construction materials</option>
    <option value="18">&nbsp;&nbsp;&nbsp;&nbsp;Electronics and Optics</option>
    <option value="6">&nbsp;&nbsp;&nbsp;&nbsp;Food and Beverage</option>
    <option value="342">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bakery &amp;        confectionery products</option>
    <option value="43">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Beverages</option>
    <option value="42">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Fish &amp; fish products </option>
    <option value="40">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Meat &amp; meat products</option>
    <option value="39">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Milk &amp; dairy products </option>
    <option value="437">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Other</option>
    <option value="378">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Sweets &amp; snack food</option>
    <option value="13">&nbsp;&nbsp;&nbsp;&nbsp;Furniture</option>
    <option value="389">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bathroom/sauna </option>
    <option value="385">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Bedroom</option>
    <option value="390">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Children’s room </option>
    <option value="98">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Kitchen </option>
</select>

Этот список еще длинее. Как его выгружать из файла или переменной при загрузке страницы?

Answer 1

Зачем его загружать в таком виде? Возможно, лучше его генерировать с помощью v-for из переменной, которая генерируется по вашим требованиям const selectList = await fetch() // [{title:'title', value:'value'}]

Answer 2

Как и сказал Владимир, Вы можете сгенерировать его с помощью v-for

<template>
<select multiple size="5">
    <option v-for="(v,k) in values" :key="k" :value="v.value">{{ v.name }}</option>
</select>
</template>

<script>
export default {
  data () {
     return {
        values: [{name: "Test", value: 1}, {name: "Test 2", value: 2}]
     }
  }
}
</script>

БЛОГ НА HUSL

Frontend Vue.js получение данных из файла или переменной

Ответы (2 шт):