1

iOS と Android の両方と互換性のある Vue ネイティブ プロジェクトでネイティブ ベース ピッカー コンポーネントを作成しようとしています。次のコードは、両方で適切に機能します。

<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 が管理するビューのプロパティ 'items' の更新中にエラーが発生しました」というエラーがスローされ、その後に「null」という新しい行が続き、その後に「label」という別の新しい行が続きます。それを機能させるには何を変更する必要がありますか？

4

0 に答える 0