小编Evo*_*nuX的帖子

目标是当值为 1-10 时有一个选择框，如果值为 +10 时有一个数字输入字段，并且有一个最小和最大限制，如代码所示。

使用 select 更改值可以正常工作并且不会返回错误，但是，当更改字段上的值时，它会返回一个字符串。

还试图使数字不能低于 1 但在我添加负数后该字段消失

<template>
  <div id="app">
    <QuantityInput
      v-on:qtyChange="updateQty($event)"
      :value="input"
      :selectMin="1"
      :selectMax="20"
    />
    <p>Quantity Selected: {{ input }}</p>
  </div>
</template>

<script>
import QuantityInput from "@/components/QuantityInput";

export default {
  name: "App",
  components: {
    QuantityInput
  },
  data() {
    return { input: 1 };
  },
  methods: {
    updateQty(qty) {
      this.input < 1 ? (this.input = 1) : (this.input = qty);
    }
  }
};
</script>

QuantityInput 组件

<template>
  <select v-if="qty < 10" v-model="qty" @change="$emit('qtyChange', qty)">
    <option :value="1">1</option> …