Vue Multiselect doesn't load data

Question

Issue: Vue Multiselect isn't populating with data

Basic Explaination: I am using Vue Multiselect for a dropdown for plans on an application. I am able to get the data to load into the data prop - tested with adding a <p>{{plans}}</p> right below the multiselect in the UI and it outputs the correct data which is an array of objects that should be read by multiselect.

Template code:

<multiselect v-model="plan" deselect-label="Can't remove this value" track-by="id" label="name" placeholder="Select a plan" :options="plans" :searchable="false" :allow-empty="false" :hide-selected="true"></multiselect>

Script code - stripped down:

import axios from 'axios';
export default {
  data() {
    return {
      plan: null,
      plans: null
    }
  },
  created() {
    axios.get('/billing/plansLoad', {})
    .then(plans => {
        this.plans = plans.data.plans
    })
  }
}

For the created section I have tried created, beforeCreate, and beforeMount, all of which don't seem to work.

Extra notes: I can get the multiselect to output the correct data by pasting in the data to the data prop that is returned by the API call.

Answer 1

Whenever there is an initialization race condition where the component needs data on first render, you can use v-if to delay that render until the data is ready:

<multiselect v-if="plans"...

This way the <multiselect> doesn't render at all until the data is already available.