1

我正在尝试在与 iOS 和 Android 兼容的 Vue Native 项目中编写 Native Base Picker 组件。以下代码在两者上都能正常工作：

<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 管理的视图的属性‘项目’时出错”，然后是一个新行，上面写着“null”，然后是另一个新行，上面写着“标签”。应该改变什么才能让它工作？

4

0 回答 0