使用 v-for 在 v-select 中循环选项值，是否可行？

Question

我是 VueJS 的新手，正在使用 vuetify 做一个 select 下拉菜单。我正在从数据库中获取一个变量，并希望尽可能使用 v-for 生成选项。我无法让它工作，所以我使用的解决方案如下，但我认为它可以以更有效的方式完成。

<v-select 
   v-show="pgto.tipo === 'credito'"
   v-if="input.jornada.parcelas === 6"
   v-model="pgto.parcelas"
   :items="['1','2','3','4','5','6']"
   label="Parcelas"
   required
   />
<v-select
   v-show="pgto.tipo === 'credito'"
   v-if="input.jornada.parcelas === 5"
   v-model="pgto.parcelas"
   :items="['1', '2', '3', '4', '5']"
   label="Parcelas"
   required
   />
<v-select
   v-show="pgto.tipo === 'credito'"
   v-if="input.jornada.parcelas === 4"
   v-model="pgto.parcelas"
   :items="['1', '2', '3', '4']"
   label="Parcelas"
   required
   />
<v-select
   v-show="pgto.tipo === 'credito'"
   v-if="input.jornada.parcelas === 3"
   v-model="pgto.parcelas"
   :items="['1', '2', '3']"
   label="Parcelas"
   required
   />
<v-select
   v-show="pgto.tipo === 'credito'"
   v-if="input.jornada.parcelas === 2"
   v-model="pgto.parcelas"
   :items="['1', '2']"
   label="Parcelas"
   required
   />
<v-select
   v-show="pgto.tipo === 'credito'"
   v-if="input.jornada.parcelas === 1"
   v-model="pgto.parcelas"
   :items="['1']"
   label="Parcelas"
   required
   />

我正在从数据库中获取 input.jornada.parcelas。我最初的想法是做这样的 JS，但是使用 v-select:

for(var i = 1; i <= input.jornada.parcelas; i++){
      "<option value='" + i + "'>" + i + "</option>";
    }

我的尝试：

<v-select
    v-show="pgto.tipo === 'credito'"
    v-model="pgto.parcelas"
    :options v-for="n in input.jornada.parcelas" {{ n }}>

如您所见，我的发展并不顺利...有什么建议、参考或想法吗？

Answer 1

你想做的不是 Vue 的工作方式，因此它不会工作。

您应该修改数据并将其绑定到 v-select.

，而不是生成选项标签

我会通过 computed property 生成列表值或加载数据，并将其作为数据中的变量保存（如果只使用一次的话）。

假设数据是动态的，并且会发生变化，您将使用计算的属性。

computed:{
   options(){
      let opts = [];
      for(let i = 1; i <= input.jornada.parcelas; i++){
          opts.push({text:i, value:i});
      }
      return opts
   }
}

然后你将计算值绑定到 items，vuetify 将处理其余的。

<v-select
    v-show="pgto.tipo === 'credito'"
    v-model="pgto.parcelas"
    :items="options"
>

使用 v-for 在 v-select 中循环选项值，是否可行？

Loop options values in v-select using v-for, is it doable?

vue.js

v-for

vuetify.js

v-select