Search code examples
ruby-on-railsvue.jsvue-componentvuexvue-multiselect

Vue-Multiselect displaying object instead of "name" field

I would like to know how to change this vue-multiselect example shown at this link (https://vue-multiselect.js.org/#sub-tagging), so that the array shown underneath only shows a list of names separated by commas. You can see in the image, I have selected Javascript and Open Source...and beneath it shows the entire object for both. I want to only show the 2 names separated by commas. Any help would be appreciated...

enter image description here

Can I make a simple change (hopefully) to this {{ value }} call below to accomplish this? Changing to {{ Value.name }}, etc does not work.

<div>
  <label class="typo__label">Tagging</label>
  <multiselect v-model="value" tag-placeholder="Add this as new tag" placeholder="Search or add a tag" label="name" track-by="code" :options="options" :multiple="true" :taggable="true" @tag="addTag"></multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>
Solution

  • One way is to convert it using javascript in the binding:

    <pre class="language-json"><code>{{ value.map(v => v.name).join(', ')  }}</code></pre>