В vue3 я передаю массив параметров из родительского компонента в дочерний, чтобы использовать его в качестве параметров для выбора. На данный момент я не могу использовать его для инициализации моего выбора.
Вот дочерний компонент SmartNumberInput
<template>
<div>
<div>Selected: {{ selected }} Initial:{{ initial }}</div>
{{ options }}
<div v-for = "option in options" :key = "option.value">
{{ option.text }}
</div>
<input type = "number" v-model = "input_value" />
<select v-model = "selected">
<option
v-for = "option in options"
:value = "option.value"
:key = "option.value"
>
{{ option.text }}
</option>
</select>
</div>
</template>
<script>
export default {
props: ["initial", "options"],
data() {
return {
selected: "",
input_value: "",
};
},
};
</script>
Вот родительский компонент
<template>
<div>
<h1>Hi! I am the root component</h1>
<div class = "smart-number-input">
<smart-number-input
initial = "B"
options = "[{text:'Liters',value:'A'},{text:'Gallons',value:'B'},{text:'Pints',value:'C'}]"
/>
</div>
</div>
</template>
<script>
import SmartNumberInput from "./SmartNumberInput.vue";
export default {
data() {
return {
initial: "salut",
};
},
components: { SmartNumberInput },
};
</script>
<style>
.smart-number-input {
width: 100%;
background:#EEE;
}
</style>
В результате я получаю (см. рисунок), в выборе нет видимой опции, хотя при нажатии на маленькую стрелку она расширяется длинным пустым списком. Оператор {{options}} в дочернем элементе отображает то, что я передаю как реквизит, то есть массив объектов, но ничего не отображается в div, где я использую цикл v-for. Когда я объявляю параметры как данные в дочернем элементе, оба цикла (div и select) работают нормально.
Может ли кто-нибудь объяснить, что не так в том, как я передаю или использую множество параметров?
заменить options
на :options
(добавить двоеточие)
.
если вы не поставите двоеточие, оно будет рассматривать значение как строку...
Большое спасибо. Теперь он работает нормально!