Matching system using Vue.js

Project files:

  • matching.vue
  • matching.js

1. Matching json data

let's represent our two arrays of data to match into a json called arr.

var arr="{"match1":["fruit","vegetables","flowers"],"match2":["cucumber","tulipes","apple"]}";

2. Create the template

matching.vue
    <div>
      <br/>
      <div v-for="(m1,index) in arr.match1" :key="'match1_'+m1" :id="'match1_'+index" >
        {{ m1 }}
        <select  v-on:change="onChange" class="form-control" v-model="selected[index]" :name="index" :id="index" >
          <option v-for="(m2,index2) in arr.match2" v-bind:value="index2" :id="'match2_'+index2" :key="'match2_'+index2" :selected="index === index2 ? true : false">
            {{ m2 }}
          </option>
        </select>
      </div>
  </div>
                           

We will loop into match1 array and show value as label then for each correspondant dropdown loop into match2 to fill values and the selected one as ordered in the array.

3. Preparing two jsons

Fill two jsons by the basic indexes representing order of values.

matching.js
 beforeMount:function(){
        for(var i=0;i<this.arr.match1.length;i++){
            var newMatch=i;
            this.selected[newMatch]=i;
            this.val[newMatch]=i;
        }
      }
  

4. OnChange function

onChange function will get the selected value then search for it in other dropdown using saved jsons. old value will be replaced in the other dropdown.

matching.js
  methods: {
      onChange:function(e) {
          var currentSelectedIndex=e.target.options.selectedIndex;//1
          var previousIndex=this.val[e.target.id];

           for(var i=0;i<Object.keys(this.val).length;i++){
             if(this.val[i]==currentSelectedIndex){
               this.val[i]=previousIndex;
               document.getElementById(i).value=previousIndex;
               this.selected[i]=previousIndex;
             }
           }
       this.val[e.target.id]=currentSelectedIndex;


        }
},

                            

Done!!

Comments

  1. The second code is SLBWB300 and is strictly for use with cryptocurrency deposits. If you proceed depositing crypto, you can to|you probably can} declare as much as} $7,500 in whole over your first eight deposits. Bonuses are a superb approach to enhance your https://thekingofdealer.com/pharaoh-casino/ expertise at on-line casinos — but only if you know where to seek out|to search out} the best ones.

    ReplyDelete

Post a Comment