How can I set default value?

[HeadStudios]

Below is my code how do I set 'joker' for example to be default value?

<template>
  <Multiselect
  v-model="value"
  class="custom-multiselect"
  mode="tags"
  :close-on-select="false"
  :options="{
    batman: 'Batman',
    robin: 'Robin',
    joker: 'Joker'
  }"
  @click.native.stop
/>
</template>

<script>
import Multiselect from '@vueform/multiselect'
import axios from 'axios';

export default {
props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
components: {
      Multiselect,
    },
    data() {
      return {
        value: null,
        options: [
          'Batman',
          'Robin',
          'Joker',
        ]
      }
    },
    mounted() {
    this.value = [{ value: 'Joker', label: 'Joker' }];
  },
    watch: {
    value: {
      handler(newValue) {
        console.log("The value we just got is...");
        console.log(newValue);

        //console.log(this.resource.title);
        Nova.success('We like it like that! The resource id is: ' + this.resource);
      },
      deep: true,
    },
  },
}
</script>

<style src="@vueform/multiselect/themes/default.css"></style>
<style scoped>
.custom-multiselect {
  width: 250px; /* Adjust this value to set the desired width */
}
</style>

[yogesh-gohil]

hey @HeadStudios , you can fix this issue by doing following way hope it will helps you,

• Make options array with label & value like this and pass to options props options: [ { label: 'Batman', value: 'Batman' }, { label: 'Robin', value: 'Robin' }, { label: 'Joker', value: 'Joker' }, ],

  • And pass object props as true to multiselect here is full code which seems to work as expected:

  
  <template>
  <Multiselect
  v-model="value"
  class="custom-multiselect"
  mode="tags"
  :close-on-select="false"
  :options="options"
  :object="true"
  @click.stop
  />
  </template>