Vue 默认值动态 select 选项

Question

我已尽力使以下代码尽可能简洁。

此代码的目标：通过 api（本例中为 data.json）获取门票（产品），并将其显示在 table 中供用户购买。

我正在努力的部分？每个产品都有一个数字，代表每个用户可以购买的最大数量。我在选项中动态显示这些值，这很有效。为了让您更好地理解，这里是代码：

https://codesandbox.io/s/headless-currying-gocrw?fontsize=14&hidenavigation=1&theme=dark

一切都按预期和需要进行，但真正好的是在选项编号中添加一个前导零。现在，当用户选择了一些门票并改变了主意时，他将无法这样做。

编辑：

如果您通过上面的 URL 查看代码，它现在确实已修复（感谢 +1 解决方案并使用索引作为我的值）。现在我想选择 0 作为默认值。我不太确定如何实现这一目标。

for 循环如下所示：

<select v-model="selectedTickets[product.id]">
 <option v-for="(maximum, n) in Number(product.product_meta.maximum) + 1" :value="n" :key="n">
  {{ n }}
 </option>
</select>

数据函数如下所示：

data() {
        return {
          selectedTickets: {},
          products: null
        };
      }

Answer 1

您应该添加：

<option value="0"> 0 </option>

在 v-for 循环 options 之前，它看起来像这样：

<select v-model="selectedTickets[product.id]">
  <option value="0"> 0 </option>
  <option
    v-for="(maximum, n) in Number(product.product_meta.maximum)"
    :value="maximum"
    :key="n"
  >
    {{ maximum }}
  </option>
</select>

现在，第一个选项将成为默认选项，用户可以随时返回。

您可以做的另一件事是将 +1 添加到 product.product_meta.maximum 并将 n 用于 :value 而不是 maximum。

不过，最好的选择是创建一个名为 getSelectableOptions(product) 的方法，它将 return 给定产品的可选选项数组，例如 [0, 1, 2, 3, 4, 5] 然后您可以遍历它，这样你的代码会更清晰。

希望对您有所帮助！

Answer 2

您可以在底部添加一个清除按钮来重置所有 selection

<button @click="selectedTickets={}">Reset</button>

也可以为每个 select 输入实现单独的清除按钮，如下所示：

<select v-model="selectedTickets[product.id]">
    <option
        v-for="(maximum, n) in Number(product.product_meta.maximum)"
        :value="maximum"
        :key="n"
    >
        {{ maximum }}
    </option>
</select>
<button
    @click="resetSelection(product.id)"
    v-if="product.id in selectedTickets"
>
    Clear
</button>

然后在methods部分创建一个方法

resetSelection: function(productId) {
   delete this.selectedTickets[productId];
}

这将清除个人 selects。

Vue 默认值动态 select 选项

Vue default value dynamic select options

select

options

vue.js

v-for