将 html <select> 和 <option> 重新编码为 vuetify <v-select>
Posted
技术标签:
【中文标题】将 html <select> 和 <option> 重新编码为 vuetify <v-select>【英文标题】:Recode a html <select> and <option> into vuetify <v-select> 【发布时间】:2020-03-10 05:23:08 【问题描述】: Quantity:
<select>
<option value="0">0</option>
<option
:value="x"
v-for="x in product.stock_count"
:key="x"
:selected="x == product.quantity"
>x</option>
</select>
这里,product.stock_count 是存货总数的整数值,product.quantity 是选择的要更新的数量。我想建立相同的选择 使用 vuetify v-select 进行控制 https://vuetifyjs.com/en/components/selects#api
不直接在 v-select 中使用产品对象,使用具有整数值(例如 5)的对象属性 product.stock_count,现在我希望 v-select 具有从 1 到 5 的值。并且 0 时product.stock_count 返回 0。
<v-select :items="items"></v-select>
<script>
export default
data: () => (
//items: [from zero to product.stock_count],
),
</script>
请帮帮我。
【问题讨论】:
【参考方案1】:<template>
<v-select
v-model="selected"
:items="products"
label="Standard"
item-text="name"
item-value="id"
return-object
></v-select>
</template>
<script>
export default
data: () => (
products: [],
selected:id:1,stock_count:5,quantity:5,name:'Product 1'
),
methods:
getproductAPI()
this.products= [
id:1,
stock_count:5,
quantity:5,
name:'Product 1'
,
id:2,
stock_count:10,
quantity:10,
name:'Product 2'
,
]
,
,
mounted()
this.getproductAPI()
</script>
如果你使用对象
【讨论】:
不直接在试试这个:
<v-select
:items="items"
v-model="selection"
>
</v-select>
...
selection: 0
如果您有其他数据(根据您想要显示的 product. stock_count/quantity
似乎如此,您可以使用 item-text, item-value
道具。
【讨论】:
我想将 v-select 项映射到从 0 到 product.stock_count 的所有整数,并且选择的整数将更新为 product.quantity。 在created
上设置一个数据属性(items
,如果你愿意的话),它会执行类似于this.items = [...Array(this.product.stock_count).keys()]
的操作,那么你将拥有一个更新数量的@change="updateQuantity"
。以上是关于将 html <select> 和 <option> 重新编码为 vuetify <v-select>的主要内容,如果未能解决你的问题,请参考以下文章
我可以将 required 属性应用于 HTML5 中的 <select> 字段吗?