Question

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

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

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

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)的方法，该方法将返回给定产品（例如[0, 1, 2, 3, 4, 5]）的可选选项的数组，然后可以通过该方法进行遍历您的代码将更干净。

希望这会有所帮助！

Answer 2

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

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

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

<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];
}

这将清除单个选择。

Vue默认值动态选择选项

2 个答案: