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>
数量输入组件
<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>
解决方案
制作v-model.number
成功了。感谢@BrandonPratt!
推荐阅读
- python - 使用硒自动点击
- unity3d - 在编辑器中而不是在运行时绘制线
- python - ValueError:未能找到可以处理输入的数据适配器:
, - ruby-on-rails - 无法在 macos Catalina 上安装 ffi -v '1.9.18'
- c++ - 错误:声明为“auto”的非静态数据成员
- python - 在 Chrome 浏览器中出现错误:NoReverseMatch at / Reverse for 'post_detail' with keyword arguments '{'pk': ''}' not found
- machine-learning - 为电子邮件收件人的建议寻找最合适的解决方案
- matlab - BW 细胞边界浓度
- python - Python - 如何从嵌套列表中获取所有可能的组合
- python - 无法使用 Selenium 访问框架内的任何元素