循环选项值在v-select使用v-for，它是可行的吗?

Question

我是VueJS的新手，使用vuetify做一个选择下拉菜单。我从DB得到一个变量，如果可能的话，我想使用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从DB。我最初的想法是做这样的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属性。

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