I'm encountering an issue while attempting to utilize $refs in my Vue 3 application. Each time I try, I receive the Typescript error stating that "Object is of type 'unknown'". I am uncertain about how to resolve this problem.
Here's a snippet from my .vue file:
<template>
<div id="content">
<h2>
Add Products
</h2>
<Multiselect v-model="products"
mode="tags"
placeholder="Select one or more products..."
ref="multi"
:searchable="true"
:createTag="true"
:options="options"></Multiselect>
<div v-for="(product, index) in this.products"
v-bind:key="index"
v-bind:name="product">
<Button class="primary"
text="Remove"
@click="removeProduct(product)"></Button>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import Button from '@/components/Button.vue'
import Multiselect from '@vueform/multiselect'
export default defineComponent({
name: 'TrackSymptoms',
components: {
Button,
Multiselect
},
data () {
return {
products: [],
options: [
{ value: 'Alpha', label: 'Alpha' },
{ value: 'Bravo', label: 'Bravo' },
{ value: 'Charlie', label: 'Charlie' },
{ value: 'Delta', label: 'Delta' }
]
}
},
methods: {
removeProduct (product: string) {
this.$refs.multi.deselect(product)
}
}
})
</script>
The specific line causing the error is
this.$refs.multi.deselect(product)removeProduct function.
According to the documentation, it should be used like this:
mounted() {
this.$refs.multiselect.open()
}