Get data from nested json and display using Vue-Multiselect

Question

Basically what I want to achieve is GET data from server and display the data in the nested json to display in Multiselect, Vue-Multiselect

After displaying, i'm able to add new tags to it if i want (Being able to update it).

I'm able to get the objects from the nested json to display in multiselect, but I'm not sure how to customize it to only show the name.

Current behaviour:

So expected behaviour would be, only Sofa, Table and Chair should be shown in the multiselect:

Is there a way for me to only display like the picture above?

After implementing @Ikbel's way of getting the json object and showing only the required name. Now I have another problem which is I get duplicates of the options whenever I add a new tag to it.

This is my Vue Code:

   <template>
       <multiselect :multiple="true"
       v-model="data.subCategoryNames"
       :hide-selected="true"
       :selected="data.subCategoryNames"
       :options="computedSubCategoryNames"
       :taggable="true"
       @tag="addTag"
        >
        </multiselect>
  </template>


  methods: {
    addTag (newTag) {
      // this.options.push(newTag)
      this.data.subCategoryNames.push(newTag)
    }
  }



computed: {
    computedSubCategoryNames () {
      return this.allSubCategoryNames.map((item) => {
        this.options.push(item.subCategoryName)
        this.data.subCategoryNames.push(item.subCategoryName)
        return item.subCategoryName
      })
    }
  }

Which shows this:

Thank you for your help!

Ok, I answered your question below, take a look.

Ikbel
– Ikbel

2017-07-24 10:32:08 +00:00
Commented Jul 24, 2017 at 10:32 — Ikbel
– Ikbel, Commented Jul 24, 2017 at 10:32

Ikbel · Accepted Answer · 2017-07-24 10:30:59Z

3

Ok @mary. Here is a better solution. Simply add label="subCategoryName" to your multiselect component to make it show subCategoryName only instead of the whole object. So no need for a computed property.

track-by should be used to avoid duplicate values.

Here is a working example.

let Multiselect = VueMultiselect.Multiselect

let vm = new Vue({
  el: '#app',
  data: {
    data: {
      subCategoryNames: [],
      options: [
        {subCategoryName: 'Chair', count: 2},
        {subCategoryName: 'Table', count: 5},
      ],
    },
  },   
 
  components: { 
    Multiselect 
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>

<script src="https://unpkg.com/[email protected]"></script>

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/vue-multiselect.min.css">


<div id="app">        
  <multiselect :multiple="true"
       v-model="data.subCategoryNames"
       :hide-selected="true"
       :selected="data.subCategoryNames"
       :options="data.options"
       :taggable="true"
       label="subCategoryName"
       track-by="subCategoryName"
        >
        </multiselect>
        
   {{data.subCategoryNames}}
</div>

edited Jul 24, 2017 at 10:30

answered Jul 24, 2017 at 10:17

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

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

1 Comment

mary Over a year ago

Hi @Ikbel , using label="subCategoryName" and track-by="subCategoryName" worked for my case! Thanks for your help!

Ikbel · Accepted Answer · 2017-07-24 07:12:03Z

1

Use a computed property to extract the subcategory names. Here is how you can do it.

Bind your multiselect options to a computed subCategoryNames instead. Let's call it computedSubCategoryNames, and use the array method map() to extract subCategoryName from subCategoryNames. Here is an example:

<multiselect :options="computedSubCategoryNames">
</multiselect>

And in define computedSubCategoryNames:

computed: {
  // Returns ['Chair', 'Sofa', 'Table']
  computedSubCategoryNames() {
    return this.subCategoryNames.map(function(item) {
      return item.subCategoryName
    }) 
  }
}

answered Jul 24, 2017 at 7:12

Ikbel

7,8513 gold badges36 silver badges46 bronze badges

3 Comments

mary Over a year ago

Hi @Ikbel , I used your method and it works! I have also added additional code to it so it works 100%. this.options.push(item.subCategoryName) this.data.subCategoryNames.push(item.subCategoryName)

mary Over a year ago

Hi @Ikbel , after adding this line this.options.push(item.subCategoryName) i realized i have another problem which is, whenever i want to add a new tag, my options will then be "sofa,table,chair,TEST1,sofa,table,chair". Is there a way to stop the re-pushing of options from the computed method?

Ikbel Over a year ago

Hi @mary. Can you post your Vue methods so I can look into that. I think that there's a better way to do that.

Ashok Kateshiya · Accepted Answer · 2017-07-24 06:36:38Z

0

Please refer below URL, onether approach to show multiselect drop down in android https://asnehal.wordpress.com/2012/04/03/multi-select-drop-down-list-in-android/

answered Jul 24, 2017 at 6:36

Ashok Kateshiya

6994 silver badges10 bronze badges

Collectives™ on Stack Overflow

Get data from nested json and display using Vue-Multiselect

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related