vue.js - vue-multiselectの初期化

概要

vue-multiselectの複数を選択する場合の初期化処理。

使用コンポーネント

vue-multiselect.js.org

sample code

//----------------------------------------
// main.js
//----------------------------------------
import Vue from 'vue'
import App from './App.vue'
import Multiselect from 'vue-multiselect'


Vue.config.productionTip = false

// register globally
Vue.component('multiselect', Multiselect)

new Vue({
  render: h => h(App),
}).$mount('#app')

//----------------------------------------
// App.vue
//----------------------------------------
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App"/> -->
    <div class="ms">
      <MultiSelect :initialValues="myInitialValues" ></MultiSelect>
    </div>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'
import MultiSelect from './components/MultiSelect.vue'

export default {
  name: 'App',
  components: {
    // HelloWorld,
    MultiSelect
  },
  data() {
    return {
      myInitialValues: [2, 4]
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

.ms {
  width: 300px;
  margin-right:auto;
  margin-left:auto;
}

</style>

//----------------------------------------
// MultiSelect.vue
//----------------------------------------
<!-- Vue component -->
<template>
  <div>
    <multiselect
      v-model="value"
      :options="options"
      :multiple="true"
      label="name"
      :track-by="this.trackBy"
    >
    </multiselect>
  </div>
</template>

<script>
  import Multiselect from 'vue-multiselect'
  export default {
    // OR register locally
    components: {
      Multiselect
    },
    props: {
      initialValues: {
        Array
      },
      // trackBy: {
      //   String
      // }
    },
    data () {
      return {
        value: null,
        options: [
          { id:1, name:'data1' },
          { id:2, name:'data2' },
          { id:3, name:'data3' },
          { id:4, name:'data4' },
          { id:5, name:'data5' },
        ],
        trackBy: "id"
      }
    },
    // mounted() {
    //   console.log("mounted", this.initialValues)
    //   this.value = this.options.filter(x => {
    //       //console.log("x[this.trackBy]", x[this.trackBy])
    //       return this.initialValues.includes(x[this.trackBy])
    //     });
    // }
    watch: {
      initialValues: {
        immediate: true,
        handler(values) {
          console.log("watch", values);
          this.value = this.options.filter(x => {
              return values.includes(x[this.trackBy])
            });
        }
      }
    }
  }
</script>

<!-- New step!
     Add Multiselect CSS. Can be added as a static asset or inside a component. -->
<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

<style>
  /* your styles */
</style>