Question

我从select中选择多个选项，并根据我需要动态添加行的所选选项。怎么可能呢。如果我一次选择1个选项。我得到的结果。但如果我选择多个选项，我将无法获得结果。

如果我从select中选择选项1和2。我需要添加与选项1和2相对应的行

   <div id="addForm">
     <div class="row">
        <div class="col-md-4">
        <div class="form-group label-floating">
        <label class="control-label">Case Type</label>
        <select class="form-control" v-model="selectedType" multiple>
        <option value="1">One</option>
        <option value="2">Two</option>  
        <option value="3">Three</option>     
        </select>
        </div>
        </div>
      <div>

     <div class="row" v-if="selectedType==='1'">
     <div class="col-md-4">
     <div class="form-group label-floating">
     <label class="control-label">Date Released</label>
     <input type="date" class="form-control" v-model="released" required="">
     </div>
     </div>
     </div>



     <div class="row" v-if="selectedType==='2'">
     <div class="col-md-4">
     <div class="form-group label-floating">
     <label class="control-label">Full Name</label>
     <input type="date" class="form-control" v-model="fullname" required="">
     </div>
     </div>
     </div>

我的vue js代码是

new Vue({
    el: "#addForm",
    data: {
        selectedType: '',
        address:'',
        fullname:'',
        released:''
    },
    methods: {
    }
});

我需要选择多个选项，基于相同的选项，我需要动态添加行。

现在，如果我选择一个选项，我可以实现我的代码（上面代码）中显示的结果，但是，我需要选择多个选项，并根据选择的选项，我需要动态添加行。即。如果我选择选项1和2，我需要为选项1和2添加行。

请帮我解决。

Answer 1

首先，selectedType不应该是字符串而是数组。您应该已在控制台中收到警告。其次，如果您使用===，则永远不会获得超过1个匹配项，因为您只需查找值是否匹配，您需要使用某种类型的数组值查找器，如{{1 }}

https://codesandbox.io/s/0pwjq98j5v

include

Answer 2

selectedType应该是一个数组，并在v-if的条件下使用selectedType.includes（）。

    const app = new Vue({
    el: "#addForm",
    data: {
        selectedType: [],
        address:'',
        fullname:'',
        released:''
    },
    methods: {
    }});

 <div id="addForm">
      <div class="row">
         <div class="col-md-4">
         <div class="form-group label-floating">
         <label class="control-label">Case Type</label>
         <select class="form-control" v-model="selectedType" multiple>
         <option value="1">One</option>
         <option value="2">Two</option>
         <option value="3">Three</option>
         </select>
         </div>
         </div>
       <div>
    
      <div class="row" v-if="selectedType.includes('1')">
      <div class="col-md-4">
      <div class="form-group label-floating">
      <label class="control-label">Date Released</label>
      <input type="date" class="form-control" v-model="released" required="">
      </div>
      </div>
      </div>
    
    
    
      <div class="row" v-if="selectedType.includes('2')">
      <div class="col-md-4">
      <div class="form-group label-floating">
      <label class="control-label">Full Name</label>
      <input type="date" class="form-control" v-model="fullname" required="">
      </div>
      </div>
      </div>

如何在vue js html中使用arrray检查v-if条件？

2 个答案: