如何添加Old数据来选择表单中的输入(通过vue.js循环)

Question

此代码适用于正常选择输入

<select id="condition" name="condition"  class="@error('condition') is-invalid @enderror form-control" >
<option value="" >Select Condition</option>
<option value="Brand New" {{ old('condition') === 'Brand New' ? 'selected' : '' }} >Brand New</option>
<option value="Recondition" {{ old('condition') === 'Recondition' ? 'selected' : '' }} >Recondition</option>
<option value="Used" {{ old('condition') === 'Used' ? 'selected' : '' }} >Used</option>
</select>

但我需要使用旧数据来选择通过Vue.js 循环的输入

<select class="form-control" name="model" id="model" v-model="model">
<option v-for="option in model_options[make]" v-bind:value="option.id" v-bind:key="option.id">@{{option.text}}</option>
</select>

Answer 1

我不确定我是否完全理解你在寻找什么。

我认为您只需要将model(用于v-model="model"(设置为您想要选择的选项的id。

我在下面包含了一个片段，它在基于oldCondition的mounted上执行此操作。

new Vue({
el: "#app",
data: () => {
return {
oldCondition: "Recondition",
model: null,
make: 0,
model_options: [
[{
id: 1,
text: "Brand New"
}, {
id: 2,
text: "Recondition"
}, {
id: 3,
text: "Used"
}]
]
};
},
mounted() {
if (this.oldCondition)
this.model = this.model_options[this.make].filter(x => x.text === this.oldCondition)[0].id;
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>Old Condition: {{oldCondition}}</div>
<br />
<select class="form-control" name="model" id="model" v-model="model">
<option>Select Condition</option>
<option v-for="option in model_options[make]" :value="option.id" :key="option.id">@{{option.text}}</option>
</select>
</div>