Loading V-Select with Data from JSON Using Vue.js

Question

Loading V-Select with Data from JSON Using Vue.js

I tried to populate my v-select multiselect element using a JSON object, but unfortunately it did not work as expected.

Here is the result I encountered:

https://i.sstatic.net/kd1Gl.png

<v-select v-model="serviceValues" :items="serviceOptions" item-text="serviceOptions" clearable multiple>
</v-select>

    serviceOptions: {"youtube":0,
 "facebook":1,
 "whatsapp":2,
 ... (remaining key-value pairs truncated for brevity)
"softonic":197}

After selecting multiple services, the `serviceValues` array should be populated like this:

serviceValues: [0, 2, 3, 4, 5, ...]

My question is how can I display only the keys (such as youtube, facebook, whatsapp, etc.) in vue select and then store the selected values in the `serviceValues` array when users choose multiple services?

javascript vue.js vue-component vuetify.js

Answer 1

Answer №1

Transform your object into a list of objects formatted like {text: 'something', value: 2}, which is necessary for v-select by creating a computed property.

Here's how you can do it:

computed: {
   options() {
      return Object.entries(this.serviceOptions)
                .map(([key, value]) => ({text: key, value: value}));
   },
},

Answer 2

Transform your object into a list of objects formatted like {text: 'something', value: 2}, which is necessary for v-select by creating a computed property.

Here's how you can do it:

computed: {
   options() {
      return Object.entries(this.serviceOptions)
                .map(([key, value]) => ({text: key, value: value}));
   },
},

Answer 3

Answer №2

Implement a computed property that converts an object into an array.

data(){
 return {
  serviceOptions:{
    "youtube":0,
    "facebook":1,
     ....
  }
 }
},
computed: {
   options() {
      return Object.entries(this.serviceOptions)
              .map(([key, value]) => ({text: key, value: value}));
   },
},

Then, link it to the items prop and make sure to link the text property to the item-text prop.

<v-select v-model="serviceValues" :items="options" item-text="text" clearable multiple>
</v-select>

Answer 4

Implement a computed property that converts an object into an array.

data(){
 return {
  serviceOptions:{
    "youtube":0,
    "facebook":1,
     ....
  }
 }
},
computed: {
   options() {
      return Object.entries(this.serviceOptions)
              .map(([key, value]) => ({text: key, value: value}));
   },
},

Then, link it to the items prop and make sure to link the text property to the item-text prop.

<v-select v-model="serviceValues" :items="options" item-text="text" clearable multiple>
</v-select>

Loading V-Select with Data from JSON Using Vue.js

Answer №1

Answer №2

Similar questions

Is your Firebase .push() function encountering errors when trying to update the database?

What is the best method for distributing this array object?

How come the link function of my directive isn't being triggered?

The 'style' property is not found within the 'EventTarget' type

Include jQuery from a different directory

What causes the DOM's appendChild() to trigger on('load', ...) while jQuery's append() does not fire?

Refresh tab controllers in Angular JS on every click event

Different tiers of log levels

JavaScript - Imported function yields varied outcome from module

How can you effectively retrieve values in Chakra Core without encountering any memory complications?

A function is unable to update a global variable

What could be causing the lack of updates to my component in this todo list?

methods for extracting json data from the dom with the help of vue js

Inject $scope into ng-click to access its properties and methods efficiently

Distinguishing each unique JavaScript property within an array of objects

An error stating that "DataTable is not a recognized function" occurred within the document function

Creating and deploying a basic Angular2 application in cordova

Error: The function callback.apply is not a valid function (Node.js and Mongodb)

What is the method for initiating a POST request in Java Script without including any data?

How to effectively manage Mongoose Query Exceptions in Express.js