Javascript Vue-尝试以数字形式发出值，并在发出时获取字符串

目标是在值为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>

所选数量：{input}

从“@/components/QuantityInput”导入QuantityInput；
导出默认值{
名称：“应用程序”，
组成部分：{
数量输入
},
数据（）{
返回{input:1}；
},
方法：{
更新数量（数量）{
this.input<1？（this.input=1）：（this.input=qty）；
}
}
};

QuantityInput组件

<template>
  <select v-if="qty < 10" v-model="qty" @change="$emit('qtyChange', qty)">
    <option :value="1">1</option>
    <option :value="2">2</option>
    <option :value="3">3</option>
    <option :value="4">4</option>
    <option :value="5">5</option>
    <option :value="6">6</option>
    <option :value="7">7</option>
    <option :value="8">8</option>
    <option :value="9">9</option>
    <option :value="10">10+</option>
  </select>

  <input
    v-else
    type="number"
    :min="selectMin"
    :max="selectMax"
    v-model="qty"
    @change="$emit('qtyChange', qty)"
  />
</template>

<script>
export default {
  name: "QuantityInput",
  props: {
    value: Number,
    selectMin: Number,
    selectMax: Number
  },
  data() {
    return { qty: this.value };
  }
};
</script>

1.
2.
3.
4.
5.
6.
7.
8.
9
10+
导出默认值{
名称：“QuantityInput”，
道具：{
值：Number，
选择min:Number，
selectMax:Number
},
数据（）{
返回{qty:this.value}；
}
};

看起来您需要使用v-bind来建立一个不假定为字符串的特定数据类型。是Vue.js文档中有关道具的示例

制作

v-model.number

成功了。感谢@BrandonPratt

尝试

v-model.number=“qty”

。在

updateQty

中，您不应该检查

qty

，而不是

此项。输入
？@BrandonPratt有效。这么简单，但我完全忘记了。谢谢