Vue 和 bootstrap 下拉选择选项从对象数组中填充

Question

我需要一种方法来处理 undefined 和 null

这是引导模板，数据来自名为 dataPlus 的数组，该数组是 Firestore 中的对象数组

-- 选择一个级别 --

      <b-form-select-option
        v-for="(item, index) of $myDb.cart.levels"
        :key="index"
        :value="item.level"
        >{{ item.level }}
      </b-form-select-option>
    </b-form-select>
  </div>

我需要 b-form-select-option 来显示 undefined OR null，因为来自 firestore 的数据可以是任一

Answer 1

你是这个意思吗？

<b-form-select-option
  v-for="(item, index) of $myDb.cart.levels"
  :key="index"
  :value="handleToString(item.level)"
>
  {{ handleToString(item.level) }}
</b-form-select-option>

handleToString (val) {
  return ['string', 'number'].includes(typeof val) ? val : (JSON.stringify(val) + '')
}