Extract the value from an input-select in VueJS instead of the key

Question

Extract the value from an input-select in VueJS instead of the key

Here is the input-select code snippet:

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

The function getCountyList() is defined as follows:

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;
};

The output of

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

is as follows:

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"

However, the issue faced is that v-model="county" is receiving keys like 1, 2, 3 instead of the actual COUNTY Name upon selection. How can this be resolved?

javascript vue.js

Answer 1

Answer №1

Here is a potential solution:

fetchCountyList: function(){
   var counties=[]; 
      for (let i=0; i< data.length; i++){
        if (data[i].stateCode == this.selectedState ) { // Consider the state selected in the previous dropdown, 
and find matching counties from the dataset
               counties[i] = {name: data[i].countyName, code: data[i].countyCode};
            }
      }
    

      return counties;
  
}

No need to worry about duplicates when using objects.

Answer 2

Here is a potential solution:

fetchCountyList: function(){
   var counties=[]; 
      for (let i=0; i< data.length; i++){
        if (data[i].stateCode == this.selectedState ) { // Consider the state selected in the previous dropdown, 
and find matching counties from the dataset
               counties[i] = {name: data[i].countyName, code: data[i].countyCode};
            }
      }
    

      return counties;
  
}

No need to worry about duplicates when using objects.

Answer 3

Answer №2

Here is a neat way to filter and retrieve the selected option from the select field in vuejs.

Key points:

Utilize computed properties for filtering out or modifying reactive properties in vue
Consider using lodash to remove duplicates from arrays. It offers various methods for array manipulation without the need for writing complex logic.
Avoid manually looping over an array, creating another array, and then using Set to filter it. This method is unnecessarily long-winded.
You can attach the entire item object as the option's value and access its properties later, as demonstrated below.
Follow the camelCase naming convention for variables in vue.
Adhere to the new ES6 standards by utilizing const and let.

P.S: Expand the 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7073787d6f745c">[email protected]</a>/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>

Answer 4

Here is a neat way to filter and retrieve the selected option from the select field in vuejs.

Key points:

Utilize computed properties for filtering out or modifying reactive properties in vue
Consider using lodash to remove duplicates from arrays. It offers various methods for array manipulation without the need for writing complex logic.
Avoid manually looping over an array, creating another array, and then using Set to filter it. This method is unnecessarily long-winded.
You can attach the entire item object as the option's value and access its properties later, as demonstrated below.
Follow the camelCase naming convention for variables in vue.
Adhere to the new ES6 standards by utilizing const and let.

P.S: Expand the 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="1c7073787d6f745c">[email protected]</a>/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>

Extract the value from an input-select in VueJS instead of the key

Answer №1

Answer №2

Key points:

P.S: Expand the snippet below and run it!

Similar questions

Guide to recursively iterating through an array of objects in TypeScript/Javascript

Backbone - First render client views before creating them upon saving

Displaying PHP output within a JavaScript expression

Showing loading spinner when clicked

Trouble with innerHTML in a for loop when using getJSON

Struggles encountered while configuring React

The NodeJS module 'request' is producing symbols instead of expected HTML content

Modify the website link for the ajax request

Is the layout optimized for mobile devices?

Update data dynamically on a div element using AngularJS controller and ng-repeat

JavaScript code that transforms a comma-separated string of words into key-value pairs within an array

Tips for incorporating additional items into an established useState array utilizing map() or foreach()?

What is the correct way to change the v-model value of a child component within a parent component

What is the best way to loop through an object in TypeScript and replace a string value with its corresponding number?

Combining Mongoose OR conditions with ObjectIDs

What is the best way to locate the closest element using JavaScript?

Error in Sequelize database: Column name does not exist in the database

Tips for setting up Reaction Roles in discord.js?

Retrieve orders from a designated date using Picqer

Saving an edited polygon path in Vue using Google Maps