时间戳

首页 > 解决方案 > 如何在表单中添加旧数据以选择输入（由 vue.js 循环）

laravel - 如何在表单中添加旧数据以选择输入（由 vue.js 循环）

问题描述

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

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

标签： laravelvue.js

解决方案

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

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

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

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>

推荐阅读