Я пытаюсь написать компонент Native Base Picker в Vue проекте Native, который совместим с iOS и Android. Следующий код работает правильно на обоих:
<template>
<nb-content>
<nb-text>Picker</nb-text>
<nb-picker
mode="dropdown"
:selectedValue="selected1"
:onValueChange="onValueChange"
>
<item label="Wallet" value="key0" />
<item label="ATM Card" value="key1" />
<item label="Debit Card" value="key2" />
<item label="Credit Card" value="key3" />
<item label="Net Banking" value="key4" />
</nb-picker>
</nb-content>
</template>
<script>
import { Picker } from 'native-base';
export default {
components: { Item: Picker.Item },
data() {
return {
selected1: "key1"
};
},
methods: {
onValueChange(value) {
this.selected1 = value;
}
}
}
</script>
Это хорошо, но следующий шаг - сделать компонент более пригодным для повторного использования, сгенерировав элементы выбора из массива. Вот моя попытка сделать это:
<template>
<nb-content>
<nb-text>Picker</nb-text>
<nb-picker
mode="dropdown"
:selectedValue="selected1"
:onValueChange="onValueChange"
>
<nb-text v-for="choice in choices" :key="choice.id">
<item :label="choice.name" :value="choice.id" />
</nb-text>
</nb-picker>
</nb-content>
</template>
<script>
import { Picker } from 'native-base';
export default {
components: { Item: Picker.Item },
data() {
return {
selected1: "key1",
choices: [
{ id: 'key0', name: 'wallet' },
{ id: 'key1', name: 'ATM card' },
{ id: 'key2', name: 'debit card' },
{ id: 'key3', name: 'credit card' },
{ id: 'key4', name: 'net banking' }
]
};
},
methods: {
onValueChange(value) {
this.selected1 = value;
}
}
}
</script>
Это терпит неудачу как на iOS, так и на Android. На iOS элементы не отображаются для сборщика. На Android выдается сообщение об ошибке «Ошибка при обновлении« элементов »свойства представления, управляемого: AndroidDropdownPicker», за которым следует новая строка с надписью «ноль», а затем еще одна новая строка с надписью «метка». Что нужно изменить, чтобы заставить его работать?