CODEWITHSUNDEEP
javascriptjqueryhtmlvue.jsvue-component
user9372648
user9372648

Reputation:

How to check v-if condition with a arrray in vue js html?

I am selecting multiple options from select and based on the selected options i need to dynamically add rows. How can It be possible. If I select 1 option ata time. I am getting the result. But If I select multiple options, I am not able to get the result.

If I select options 1 and 2 from select. I need to add rows corresponding to options 1 and 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>

My vue js code is 

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

I need to select multiple options and based on the same, I need to add the rows dynamically.

Now if I select one option I am able to achieve the result as shown in my code (Above code) but, I need to select multiple options and based on the options selected, I need to add rows dynamically. ie. If i choose option 1 and 2, i need to add the rows for both options 1 and 2.

Please help me to have a solution.

Upvotes: 0

Views: 207

Answers (2)

M.Boukhlouf
M.Boukhlouf

Reputation: 313

selectedType should be an array, and use selectedType.includes() in the condition of v-if.

    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>

Upvotes: 0

A. L
A. L

Reputation: 12669

First of all, selectedType shouldn't be a string but an array. You should have received a warning in the console. Secondly, you will never get more than 1 match if you're using === since you're only looking for if the value matches, you need to use some kind of array value finder like 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>

Upvotes: 1

Related Questions