将 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>

如果你使用对象

【讨论】:

不直接在 中使用对象,使用具有整数值(例如 5)的对象属性 product.stock_count,现在我希望 具有值从 1 到 5。当 product.stock_count 返回 0 时为 0。【参考方案2】:

试试这个:

<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> 字段吗?

如何使用PHP将SQL Select语句链接到HTML按钮

如何仅使用 html 和 css 使 <options> 显示在 <select> 下拉标题下方

在servlet中得到html中下拉列表选中的值

如何获取和设置HTML文档中select元素的选中项

如何从案例中<select> 仅没有现有用户。 SQL 选择