I'm working on a Vue application where I've implemented a custom autocomplete dropdown using the Select2 library. The component is functioning correctly in terms of its intended functionality, but I'm encountering a couple of warnings during development that I haven't been able to resolve. I believe these may be related to how I'm defining props and the data function in my component.
select2.vue Component
<template>
<div>
<select class="form-control" :id="id" :name="name" :disabled="disabled" :required="required"></select>
</div>
</template>
<script>
import $ from 'jquery';
import 'select2/dist/js/select2.full';
import 'select2/dist/css/select2.min.css'
export default {
name: 'Select2',
data() {
return {
select2: null
};
},
emits: ['update:modelValue'],
props: {
modelValue: [String, Array], // previously was value: String
id: {
type: String,
default: ''
},
name: {
type: String,
default: ''
},
placeholder: {
type: String,
default: ''
},
options: {
type: Array,
default: () => []
},
disabled: {
type: Boolean,
default: false
},
required: {
type: Boolean,
default: false
},
settings: {
type: Object,
default: () => {}
},
},
watch: {
options: {
handler(val) {
this.setOption(val);
},
deep: true
},
modelValue: {
handler(val) {
this.setValue(val);
},
deep: true
},
},
methods: {
setOption(val = []) {
this.select2.empty();
this.select2.select2({
placeholder: this.placeholder,
...this.settings,
data: val
});
this.setValue(this.modelValue);
},
setValue(val) {
if (val instanceof Array) {
this.select2.val([...val]);
} else {
this.select2.val([val]);
}
this.select2.trigger('change');
}
},
mounted() {
this.select2 = $(this.$el)
.find('select')
.select2({
placeholder: this.placeholder,
...this.settings,
data: this.options
})
.on('select2:select select2:unselect', ev => {
this.$emit('update:modelValue', this.select2.val());
this.$emit('select', ev['params']['data']);
});
this.setValue(this.modelValue);
},
beforeUnmount() {
this.select2.select2('destroy');
}
};
</script>
Unit test for the component:
import { mount } from '@vue/test-utils';
import Select2 from './Select2.vue'; // Ensure correct path
describe('Select2 Component', () => {
let wrapper;
beforeEach(() => {
wrapper = mount(Select2, {
props: {
modelValue: '',
options: [],
id: 'test-select',
name: 'testName'
}
});
});
it('renders the autocomplete component', () => {
expect(wrapper.exists()).toBeTruthy();
const subComp = wrapper.findComponent({ name: 'Select2' });
expect(subComp.exists()).toBeTruthy();
});
});
Warnings:
console. warn
[Vue warn]: Prop type [] for prop "modelValue" won't match anything. Did you mean to use type Array instead? at ‹Select2 modelValue="" onUpdate:modelValue=fn class="custom-font mb-1" ...
at <Card>
at <ApproveAllAsAssociate ref="VTU_COMPONENT" >
at <VTUROOT>
console. warn
[Vue warn]: data() should return an object.
at «Select2 modelValue="" onUpdate:modelValue=fn class="custom-font mb-1" ... › at ‹Card>
at «ApproveAllAsAssociate modelValue="" ref="VTU_COMPONENT] > at <VTUROOT>