uiv-lib / uiv

Bootstrap 3 components implemented by Vue.js.
https://uiv.wxsm.space
MIT License
944 stars 182 forks source link

Multiselect causing `Uncaught TypeError: this.modelValue is undefined` error #831

Closed pdnelson closed 1 year ago

pdnelson commented 1 year ago

Describe the bug When using the Multiselect component, the following error occurs in the console and prevents the page from rendering: Uncaught TypeError: this.modelValue is undefined

I am able to get the error to occur with this setup:

<multi-select
  v-model="testing"
  :options="['one', 'two', 'three']"
/>

Variable testing is defined as follows:

data() {
  return {
    testing: []
  }
}

To Reproduce Steps to reproduce the behavior:

  1. Attempt to load page with above code block
  2. Receive console error

Expected behavior Page to load without console error.

Desktop (please complete the following information):

Additional context This is occurring on UIV 2.0.6 with Vue 3.3.4.

wxsms commented 1 year ago
<template>
  <MultiSelect
    v-model="testing"
    :options="[
      { value: 1, label: 'Option1' },
      { value: 2, label: 'Option2' },
      { value: 3, label: 'Option3' },
      { value: 4, label: 'Option4' },
      { value: 5, label: 'Option5' },
    ]"
  />
</template>

<script>
import { MultiSelect } from 'uiv';

export default {
  components: { MultiSelect },
  data() {
    return {
      testing: [],
    };
  },
};
</script>

I can not reproduce this issue using the above code (btw options does not support plain texts, you have to use a object with label and value).

Please provide a reproduce link like codepen. thanks.

wxsms commented 1 year ago

It fails when using @vue/compat. the modalValue pass to component is undefined, which should be an array instead. I have no idea how to make it work.

pdnelson commented 1 year ago

I pulled the repository and played around with it for a bit, and experienced the same thing you did; this seems like a problem with @vue/compat, and not UIV. Thank you for looking into it!