Skip to content

No way to bind single object key instead of entire object with v-model #10

@wonder95

Description

@wonder95

Normally in Vue (2 or 3) with a select list, even with an object, you can bind a particular key to a form or data value to an object key, instead of the whole object (in fact, it is considered best practice to do that). However, it seems that here, it only binds to the entire object, as is shown in all of the documentation examples.

Steps to reproduce

Use single select with an object

Expected (desired) behaviour


export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: null,
      options: [
        { name: 'Vue.js', language: 'JavaScript' },
        { name: 'Rails', language: 'Ruby' },
        { name: 'Sinatra', language: 'Ruby' },
        { name: 'Laravel', language: 'PHP', $isDisabled: true },
        { name: 'Phoenix', language: 'Elixir' }
      ]
    }
  }
}
<div>
  <label class="typo__label">Single select / dropdown</label>
  <multiselect 
  v-model="value"  deselect-label="Can't remove this value" track-by="name" label="name" placeholder="Select one" :options="options" :searchable="false" :allow-empty="false">
    <template slot="singleLabel" slot-scope="{ option }"><strong>{{ option.name }}</strong> is written in<strong>  {{ option.language }}</strong></template>
  </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

display value= "Vue.js"

Actual behaviour


export default {
  components: {
    Multiselect
  },
  data () {
    return {
      value: null,
      options: [
        { name: 'Vue.js', language: 'JavaScript' },
        { name: 'Rails', language: 'Ruby' },
        { name: 'Sinatra', language: 'Ruby' },
        { name: 'Laravel', language: 'PHP', $isDisabled: true },
        { name: 'Phoenix', language: 'Elixir' }
      ]
    }
  }
}
<div>
  <label class="typo__label">Single select / dropdown</label>
  <multiselect 
  v-model="value"  deselect-label="Can't remove this value" track-by="name" label="name" placeholder="Select one" :options="options" :searchable="false" :allow-empty="false">
    <template slot="singleLabel" slot-scope="{ option }"><strong>{{ option.name }}</strong> is written in<strong>  {{ option.language }}</strong></template>
  </multiselect>
  <pre class="language-json"><code>{{ value  }}</code></pre>
</div>

display value= { "name": "Vue.js", "language": "JavaScript" }

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions