I am working with an Array prop in my component's props that is defined like this
props: {
datasetsList: {
type: Array as PropType<Array<ParallelDataset>>,
required: false
}
},
Within the setup() method of my component, I have a function that looks like this
const selectDataset = (radioValue: number) => {
setCustomDataSet(props.datasetsList.find(dataset => dataset.id === Number(radioValue)));
}
When running this code, I encounter an error specifically on the .find() part, stating
Property 'find' does not exist on type 'unknown'.Vetur(2339)
To resolve this issue, I changed the line from
props.datasetsList.find()
to
(props.datasetsList as Array<ParallelDataset>).find()
which successfully removed the error. Does this indicate that there is an issue with how I defined the Array prop? Or could it be something else? I am currently utilizing the latest es version.
Edit:
Here is the full code for the component:
<template>
<div class="datasets-listing xs:mb-14 sm:mb-8 w-full">
<div class="grid xs:grid-cols-1 sm:grid-cols-2 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-x-5 gap-y-5 mb-16">
<div class="w-12/12 custom-dataset rounded" v-for="dataset in datasetsList" :key="dataset.id">
<FormRadio
:id="dataset.name"
:value="dataset.id"
:v-model="radioVmodel"
:isInputHidden="true"
class="rounded border"
:class="radioVmodel == dataset.id ? 'selected-dataset border-blue-700' : 'default-dataset border-gray-300'"
@change="selectDataset">
<template v-slot:radio-label>
<ParallelDatasetCard
:dataset="dataset"/>
</template>
</FormRadio>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue, { PropType } from "vue";
import Tag from "@/components/Tag.vue";
import ParallelDatasetCard from "@/components/ParallelDatasetCard.vue";
import FormRadio from "@/components/form-elements/FormRadio.vue";
import { ref } from "@vue/composition-api";
import Button from "@/components/Button.vue";
import Translate from "@/services/TranslationService";
import { ParallelDataset } from "@/models/models";
export default Vue.extend({
name: "DatasetsListing",
props: {
datasetsList: {
type: Array as PropType<Array<ParallelDataset>>,
required: false
}
},
setup(props, context) {
const { setCustomDataSet, getCustomDataset } = Translate();
const pickedDataset = getCustomDataset;
const radioVmodel = ref(String(pickedDataset.value.id));
const selectDataset = (radioValue: number) => {
radioVmodel.value = String(radioValue);
setCustomDataSet(props.datasetsList.find(dataset => dataset.id === Number(radioValue)));
}
return {
radioVmodel: radioVmodel,
pickedDataset: pickedDataset,
selectDataset: selectDataset
}
},
components: {
Tag,
Button,
FormRadio,
ParallelDatasetCard
}
})
</script>
<style lang="scss" scoped>
.datasets-listing {
.custom-dataset {
transition: .2s all ease-in-out;
&:hover {
box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.1);
}
}
.selected-dataset {
box-shadow: 0px 0px 3px 0px #2da4df;
}
}
</style>