Vue Multiselect does not update {{ value }} via v-model

Question

I am using this example for Vue Multiselect "^2.0.0-beta.14" in Laravel 5.3. https://github.com/monterail/vue-multiselect/tree/2.0#install--basic-usage

The plugin renders correctly but I cannot get the selection via v-model. I am expecting @{{ selected }} to update with the current selection.

app.js

Vue.component('dropdown', require('./components/Multiselect.vue'));

VUE JS

<template>
 <div>
   <multiselect
     v-model="value"
     :options="options">
   </multiselect>
 </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    components: { Multiselect },
    data () {
      return {
        value: null,
        options: ['list', 'of', 'options']
      }
    }
  }
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

HTML

<div id="app">
  <h3>Dropdown</h3>
  <div>
    <label class="typo__label">Single select</label>
    <dropdown></dropdown>
    <pre class="language-json"><code>@{{ value  }}</code></pre>
  </div>
</div>

NB The official example uses selected instead of value but this does not work either. According to the docs selection is replaced by value as of V2.

Michael · Accepted Answer · 2020-06-23 21:17:46Z

0

If you are using TypeScript Interfaces with Vue.js 2.0, avoid using a optional properties to store the value from child components. i.e. if your property is value:? IMyCustomInterface instead use value: MyCustomObject|null and set the object to null in the constructor.

If the property is optional, it will compile fine, but child components won't update it properly.

answered Jun 23, 2020 at 21:17

Michael

2,9753 gold badges29 silver badges31 bronze badges

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

Comments

Community · Accepted Answer · 2017-05-23 12:25:47Z

-1

The reason value is not showing up in root is because the data is isolated to the dropdown component. To get your data from a component to show up in the Root you need to use props.

See this question for a detailed explanation

How to get data from a component in VueJS

edited May 23, 2017 at 12:25

CommunityBot

11 silver badge

answered Mar 9, 2017 at 21:29

Clinton Green

9,99523 gold badges73 silver badges109 bronze badges

Collectives™ on Stack Overflow

Vue Multiselect does not update {{ value }} via v-model

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related