Array methods throw error for Array prop of specific type

Question

I have an Array prop in my component's props like this

props: {
  datasetsList: {
    type: Array as PropType<Array<ParallelDataset>>,
    required: false
  }
},

and then later on, in my setup() method I have a function like this

const selectDataset = (radioValue: number) => {
  setCustomDataSet(props.datasetsList.find(dataset => dataset.id === Number(radioValue)));
}

The code above gives me the following error on the .find() part

Property 'find' does not exist on type 'unknown'.Vetur(2339)

If I change now this part

props.datasetsList.find()

to this

(props.datasetsList as Array<ParallelDataset>).find()

the error goes away.

Does that mean that the way I have defined the Array prop is wrong? Or is it something else? I am using the latest es version.

Edit:

Component's full code:

<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>

how did you create the component?

Boussadjra Brahim
– Boussadjra Brahim

2021-10-20 14:37:56 +00:00
Commented Oct 20, 2021 at 14:37 — Boussadjra Brahim
– Boussadjra Brahim, Commented Oct 20, 2021 at 14:37

Boussadjra Brahim · Accepted Answer · 2021-10-20 14:43:35Z

1

To get types inference you should create your component using defineComponent helper :

import {defineComponent,.....} from 'vue'

export default defineComponent({
    props: {
     ......
    },
    setup(props) {
            // Stuff
        }
});

answered Oct 20, 2021 at 14:43

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Array methods throw error for Array prop of specific type

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related