如何添加旧数据以在表单中选择输入(通过 vue.js 循环) [英] how to add Old data to select inputs (looping by vue.js) in form

问题描述

此代码适用于普通选择输入

 
但我需要使用旧数据来选择通过 Vue.js 循环的输入
<option v-for="model_options[make] 中的选项" v-bind:value="option.id" v-bind:key="option.id">@{{option.text}}</选项></选择>

解决方案

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

我认为您只需要将 model(对于 v-model="model")设置为您想要选择的选项的 ID.

我在下面包含了一个片段，它根据 oldCondition 在 mounted 上执行此操作.

new Vue({el: "#app",数据:() =>{返回 {oldCondition: "修复",型号:空，制作:0，模型选项:[[{编号:1，文字:全新"}, {编号:2，文字:修复"}, {编号:3，文字:使用"}]]};},安装(){如果(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="应用程序"><div>旧条件:{{oldCondition}}</div><br/><select class="form-control" name="model" id="model" v-model="model"><option>选择条件</option><option v-for="option in model_options[make]" :value="option.id" :key="option.id">@{{option.text}}</option></选择>

this code is working for normal select inputs

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

but I need to use old data to select inputs looping via 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>

解决方案

I'm not sure I entirely understand what you're looking for.

I think you just need to set the model (for v-model="model") to the id of the option that you want selected.

I've included a snippet below where it does this on mounted based on the 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>

这篇关于如何添加旧数据以在表单中选择输入(通过 vue.js 循环)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！