Vue-multiselect: Uncaught TypeError: Cannot read property 'includes' of undefined

[PrimozRome]

I am trying to solve this error I keep getting with vue-multiselect 2.0:

vue-multiselect.min.js?6cfa:1 Uncaught TypeError: Cannot read property 'includes' of undefined

I have no idea what that means.

data: function () {
    return {
      localOptions: [{ name: 'Test' }, { name: 'Foo' }, { name: 'Bar' }]
    }
}

<multiselect
          :options="localOptions"
          :label="name"
          :selected=""
          :searchable="true"
          @update="updateSelected"
          @close="blur">
</multiselect>

What am I missing here?

[shentao]

You’re not passing anything to the :selected="" prop. Either remove it completely or pass there the selected value (which would probably be an empty object). That might be it.
Otherwise, it might be a problem with babel (Includes is an Array method). What browser are you using?

[PrimozRome]

I did try removing it but I still get the same error...

I am using Google Chrome with vue-dev tools and with vue-cli - webpack template

[PrimozRome]

I only get it when options is array of objects... If my options are simple text values and remove :label prop then it works.

[shentao]

Now I see! You have to pass the track-by="name" props. Due to the changes in Vue 2.0, the key props has been renamed to track-by (because Vue now uses key instead of track-by. It is used to identify objects inside the array. This also means that the names should be unique.

[PrimozRome]

Unfortunately still not working, same error ...

My options:
options: [{name: 'Test 1'}, {name: 'Test 2'}]

My component settings:

<multiselect
          class="form-control textarea" 
          :class="{ 'has-error': showError }"
          :options="options"
          :track-by="name"
          :label="name"
          :placeholder="placeholder" 
          :loading="loading"
          @update="updateSelected"
          @close="blur">
</multiselect>

[shentao]

If you use the : before the prop-name, it is looking for a property in the component. In this case you want to just pass the name string. Thus you should do track-by="name" instead of :track-by="name".

<multiselect
          class="form-control textarea" 
          :class="{ 'has-error': showError }"
          :options="options"
          track-by="name" // change here
          label="name"
          :placeholder="placeholder" 
          :loading="loading"
          @update="updateSelected"
          @close="blur">
</multiselect>

[PrimozRome]

Doooh I see my problem.... I have added track-by and label props as :label="name" and :track-by="name".

Thanks for your help

[shentao]

Exactly! Glad I could help!

[PrimozRome]

Do the track-by and label show to the same property inside option object? Because I migh have two times the same name and you said track-by needs to be unique. Can I add like label="name" and track-by="id"?

I tried that with ma back-end API calls and these are the options that I add to the multiselect component with following props. Gives me the same error as above.

[
  {
    "id": 14,
    "name": "Administration",
    "description": "Testing dva tri"
  },
  {
    "id": 8,
    "name": "Administration",
    "description": "Hudo k kurba ajga"
  },
  {
    "id": 12,
    "name": "Cal lab",
    "description": null
  },
  {
    "id": 2,
    "name": "Development",
    "description": "Our development lab"
  },
  {
    "id": 10,
    "name": "Hardware",
    "description": "Hardware development department"
  },
  {
    "id": 1,
    "name": "Management",
    "description": "CEOs"
  },
  {
    "id": 11,
    "name": "Production",
    "description": null
  },
  {
    "id": 6,
    "name": "Production",
    "description": null
  },
  {
    "id": 15,
    "name": "Sales",
    "description": null
  },
  {
    "id": 7,
    "name": "Service",
    "description": null
  },
  {
    "id": 5,
    "name": "Support",
    "description": null
  },
  {
    "id": 16,
    "name": "Warehouse",
    "description": null
  }
]

      <multiselect
          class="form-control textarea" 
          :class="{ 'has-error': showError }"
          :options="localOptions"
          label="name"
          track-by="id"
          :selected="value"
          :searchable="true"
          :placeholder="placeholder" 
          :loading="loading"
          @update="updateSelected"
          @close="blur">
      </multiselect>

[PrimozRome]

Maybe it is a problem because I first add empty options array []and then update options asynchronously when they are feched from api...

  data: function () {
    return {
      loading: false,
      localOptions: []
    }
  }

  created: function () {
      this.fetchData()
  }

    fetchData: function () {
      this.loading = true
      api.fetchData(this.fetch).then((response) => {
        this.loading = false
        this.localOptions = response.data.data
      }, (err) => {
        this.loading = false
      })
    }

<multiselect
            class="form-control textarea" 
            :class="{ 'has-error': showError }"
            :options="localOptions"
            label="name"
            track-by="id"
            :selected="value"
            :searchable="true"
            :placeholder="placeholder" 
            :loading="loading"
            @update="updateSelected"
            @close="blur">
</multiselect>

[PrimozRome]

Ok this is so strange... Check this out.

1. This is working (in my custom component)

<multiselect
            class="form-control textarea" 
            :class="{ 'has-error': showError }"
            :options="[{id: '1', name: 'Test 1'}, {id: '2', name: 'Test 2'}]"
            label="name"
            track-by="id"
            :selected="value"
            :searchable="true"
            :placeholder="placeholder" 
            :loading="loading"
            @update="updateSelected"
            @close="blur">
</multiselect>

2. This is working (in my custom component)

data: function () {
    return {
      loading: false,
      localOptions: [{id: '1', name: 'Test 1'}, {id: '2', name: 'Test 2'}]
    }
 }

<multiselect
            class="form-control textarea" 
            :class="{ 'has-error': showError }"
            :options="localOptions"
            label="name"
            track-by="id"
            :selected="value"
            :searchable="true"
            :placeholder="placeholder" 
            :loading="loading"
            @update="updateSelected"
            @close="blur">
</multiselect>

3. This is not working, in my custom component

Here the passed options array is a prop in my custom component and gets passed to the vue-multiselect. Prop options gets the same value [{id: '1', name: 'Test 1'}, {id: '2', name: 'Test 2'}] also seen from the screenshot bellow:

  props: {
    options: {
      type: Array,
      required: true,
      default: []
    }
  },

<multiselect
            class="form-control textarea" 
            :class="{ 'has-error': showError }"
            :options="options"
            label="name"
            track-by="id"
            :selected="value"
            :searchable="true"
            :placeholder="placeholder" 
            :loading="loading"
            @update="updateSelected"
            @close="blur">
</multiselect>

As soon as I pass :options="options" to the vue-multiselect where options is prop on my custom component, I get this error: TypeError: Cannot read property 'includes' of undefined. I think this is some kind of bug...

[PrimozRome]

Made some more tests. If the options in the scenario 3 above which is not working is array with strings (not object) then it works as well...

[PrimozRome]

@shentao I am so ashamed that I am even afraid to tell. I had two additional vue-multiselect boxes on the same form and one of those two cause the problem. Sorry for cluttering this thread but it's working as it should. I think I should stop coding on the beach.

[shentao]

Haha :D If those are the cons of coding on the beach, then I think _this is a price I would gladly pay_!
Anyway, I’m happy the problem is gone. Take care!