如何使用 vue js html 中的数组检查 v-if 条件？

Posted 2023-02-23

【中文标题】如何使用 vue js html 中的数组检查 v-if 条件？

【英文标题】：How to check v-if condition with a arrray in vue js html?

【发布时间】：2018-09-17 05:35:19

【问题描述】：

我正在从 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: 
    
);

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

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

请帮我解决一下。

【参考方案1】：

首先，selectedType 不应该是一个字符串，而是一个数组。您应该在控制台中收到警告。其次，如果你使用===，你永远不会得到超过1个匹配，因为你只是在寻找值是否匹配，你需要使用某种数组值查找器，比如include

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

<template>

<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 @change="show" 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>            
            <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>
        </div>
</div>        
</template>

<script>
export default 
  name: "HelloWorld",
  data() 
    return 
      selectedType: [],
      address: "",
      fullname: "",
      released: ""
    ;
  ,
  methods: 
    show() 
      console.log(this.selectedType);
    
  
;
</script>

【参考方案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>