VueJS get value from input-select instead of key

Question

My input-select as below,

<input-select v-model="county" id="county" :options="getCountyList()">
  &dagger; County
</input-select>

My function getCountyList() as below,

getCountyList: function () {
  var retarr = [];
  for (let i = 0; i < json.length; i++) {
    if (json[i].state_id == this.state) {
      // here STATE selected in previous drop down,
      // match it with state from json and get COUNTY
      retarr[i] = json[i].county_name;
    }
  }
  const mySet = new Set(retarr); //remove duplicates and get DISTINCT County list
  console.log("this is mySet COUNTY return array :", mySet);
  return mySet;
};

console.log ("this is mySet COUNTY return array :",mySet ) returns as below:

0: undefined
1: "St. Clair"
2: "Jefferson"
3: "Shelby"
4: "Tallapoosa"
5: "Blount"
6: "Talladega"
7: "Marshall"
8: "Cullman"
9: "Bibb"
10: "Chilton"
11: "Walker"

Now, my problem is v-model="county" is getting key i.e. 1,2,3 instead of COUNTY Name after selection. How can I get the COUNTY NAME there?

@RajestPandhare is input-select made by you? please show us the implementation of input-select — Rahul
– Rahul, Commented Aug 15, 2021 at 5:35

Rahul · Accepted Answer · 2021-08-15 06:35:14Z

1

You can try like this:

getCountyList: function(){
   var retarr=[]; 
      for (let i=0; i< json.length; i++){
        if (json[i].state_id == this.state ) { // here STATE selected in previous drop down, 
match it with state from json and get COUNTY
               retarr[i] = {text: json[i].county_name, value: json[i].county_name};
            }
      }
    

      return retarr;
  
}

You don't need set in this, as there will be no duplicates. because of object.

answered Aug 15, 2021 at 6:35

Rahul

5,9147 gold badges44 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Salvino D'sa · Accepted Answer · 2021-08-15 07:39:24Z

Let me give you a clean way of filtering and getting the selected option from the select field in vuejs.

Points to note:

Use computed properties for filtering out or manipulating reactive properties in vue
Use lodash for filter out duplicates from array. lodash has a plethora of methods for manipulating arrays and you don't need to write code for handling all the complex logic.
There's absolutely no need for you to loop over the array and then create another array and filter that out using Set. That's just a lengthy way of doing it.
You can bind the entire item object to the option's value and access it's properties later, like I've shown below.
Try and use camelCase naming convention for naming variables in vue.
Try and use const and let as per the new ES6 standards.

P.S: Expand snippet below and run it!

new Vue({
  el: "#app",
  data() {
    return {
      country: '',
      json: [
        { stateId: 1, countryName: "St. Clair" },
        { stateId: 2, countryName: "Jefferson" },
        { stateId: 3, countryName: "Shelby" },
        { stateId: 4, countryName: "Tallapoosa" },
        { stateId: 5, countryName: "Blount" },
        { stateId: 6, countryName: "Talladega" },
        { stateId: 7, countryName: "Marshall" },
        { stateId: 8, countryName: "Cullman" },
        { stateId: 9, countryName: "Bibb" },
        { stateId: 10, countryName: "Chilton" },
        { stateId: 11, countryName: "Walker" },
        { stateId: 1, countryName: "St. Clair" }
      ]
    };
  },
  computed: {
    countries() {
      return _.uniqBy(this.json, "countryName");
    },
  }
})

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
<template>
  <div>
    <select v-model="country" id="county">
      <option
        v-for="item in countries"
        :key="item.stateId"
        v-bind:value="item"
      >
        {{ item.countryName }}
      </option>
    </select>

    <span>Selected Country: ID: {{country.stateId}} Name: {{ country.countryName }}</span>
  </div>
</template>
</div>

Thanks, @Salvino , your explanation cleared my basics, I am evaluating the answer right now. My additional requirement is whenever the STATE drop down gets selected a new state, the COUNTY dropdown should populate counties for that STATE. I am trying your suggestion to accommodate this requirment.

Collectives™ on Stack Overflow

VueJS get value from input-select instead of key

2 Answers 2

Comments

Points to note:

P.S: Expand snippet below and run it!

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Points to note:

P.S: Expand snippet below and run it!

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related