Passing properties from the parent component to the child component in Vue3JS using TypeScript

Question

Passing properties from the parent component to the child component in Vue3JS using TypeScript

Today marks my inaugural experience with VueJS, as we delve into a class project utilizing TypeScript. The task at hand is to transfer the attributes of the tabsData variable from the parent component (the view) to the child (the view component). Allow me to present you with the code snippet:

<script setup lang="ts">
//import { reactive, ref, computed } from "vue";
import ArgumentTabComponent from "./components/ArgumentTabComponent.vue";
import $t from "@/core/utils/i18n/translate";
import Button from "primevue/button";
import type { IntArgumentListData } from "./types/IntArgumentListData";

const tabsData: IntArgumentListData[] = [
  {
    title: "Argumento 1",
    content: "texto1",
  },
  {
    title: "Argumento 2",
    content: "texto2",
  },
  {
    title: "Argumento 3",
    content: "texto3",
  },
  {
    title: "Argumento 4",
    content: "texto4",
  },
  {
    title: "Argumento 5",
    content: "texto5",
  },
];

const handleRedirect = () => {
  alert("Aceptando!");
};
</script>

<template>
  <br />
  <h1>Argumentarios</h1>
  <div class="">
    <ArgumentTabComponent> {{ tabsData }}</ArgumentTabComponent>
    <hr />
    <Button :label="$t('common.accept')" @click="handleRedirect" />
  </div>
</template>

Extensive research on the internet and YouTube failed to provide much insight due to the use of export default {} being incompatible with TypeScript. In an attempt to pass properties, I employed the following approach:

<script setup lang="ts">
import TabView from "primevue/tabview";
import TabPanel from "primevue/tabpanel";

// Lib imports
//import { ref } from "vue";
import type { IntArgumentListData } from "../types/IntArgumentListData";

// Properties
const props = defineProps<{
  title: IntArgumentListData;
  content: IntArgumentListData;
}>();
</script>

<template>
  <br />
  <div class="">
    <TabView>
      <TabPanel v-for="tab in props" :key="tab.title" :header="tab.title">
        <p>{{ tab.content }}</p>
      </TabPanel>
    </TabView>
  </div>
  <br />
</template>

Unfortunately, this method resulted in a perplexing error within the parent component:

error in parent component

Facing this challenge has left me disoriented. Despite countless hours dedicated to experimentation and contemplation, I am unable to decipher my missteps. Your assistance is greatly appreciated.

Error message in English:

The type '{ tabData: IntArgumentListData[]; "tab data": IntArgumentListData[]; }' cannot be assigned to type 'IntrinsicAttributes & Partial<{}> & Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ tabsData: IntArgumentListData[]; }>>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>'. Property "tabsData" is missing in type "{ tabData: IntArgumentListData[]; "tab-data": IntArgumentListData[]; }", but is required in type "Omit<Readonly<ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{ tabsData: IntArgumentListData[ ]; }>>> & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>".ts(2322)

javascript typescript vue.js vuejs3

Answer 1

Answer №1

Your props have been defined as shown below:

const props = defineProps<{
  title: IntArgumentListData;
  content: IntArgumentListData;
}>();

This implies that you are creating two props - one named title with a type of IntArgumentListData, and another named content also with a type of IntArgumentListData.

In your definition of IntArgumentListData, you have already specified the properties title and content.

Therefore, what you may want to do is something like this:

const props = defineProps<{
  tabsData: IntArgumentListData[];
}>();

Then in your component, you only need to iterate over the tabsData array.

NOTE: While using defineProps, the props will be accessible directly in the template without using props.tabsData; but in the script setup section, you need to access it using props.tabsData

<TabPanel v-for="tab in tabsData" :key="tab.title" :header="tab.title">

By doing this, the prop will be available on the component when used within the parent component. You will then need to bind the data to the prop when calling the component.

<ArgumentTabComponent :tab-data="tabsData" />

Useful documentation references:

In-depth guide on declaring props

Could you please provide an English translation of the error message?

The translated version might look something like this:

<script setup lang="ts">
//import { reactive, ref, computed } from "vue";
import ArgumentTabComponent from "./components/ArgumentTabComponent.vue";
import $t from "@/core/utils/i18n/translate";
import Button from "primevue/button";
import type { IntArgumentListData } from "./types/IntArgumentListData";

const tabsData: IntArgumentListData[] = [
  {
    title: "Argument 1",
    content: "text1",
  },
  {
    title: "Argument 2",
    content: "text2",
  },
  {
    title: "Argument 3",
    content: "text3",
  },
  {
    title: "Argument 4",
    content: "text4",
  },
  {
    title: "Argument 5",
    content: "text5",
  },
];

const handleRedirect = () => {
  alert("Accepting!");
};
</script>

<template>
  <br />
  <h1>Arguments</h1>
  <div class="">
    <ArgumentTabComponent :tabs-data="tabsData" />
    <hr />
    <Button :label="$t('common.accept')" @click="handleRedirect" />
  </div>
</template>

Child:

<script setup lang="ts">
import TabView from "primevue/tabview.vue";
import TabPanel from "primevue/tabpanel.vue";

// Lib imports
//import { ref } from "vue";
import type { IntArgumentListData } from "../types/IntArgumentListData";

// Properties
const props = defineProps<{
  tabsData: IntArgumentListData[];
}>();
</script>

<template>
  <br />
  <div class="">
    <TabView>
      <TabPanel v-for="tab in tabsData" :key="tab.title" :header="tab.title">
        <p>{{ tab.content }}</p>
      </TabPanel>
    </TabView>
  </div>
  <br />
</template>

Answer 2

Your props have been defined as shown below:

const props = defineProps<{
  title: IntArgumentListData;
  content: IntArgumentListData;
}>();

This implies that you are creating two props - one named title with a type of IntArgumentListData, and another named content also with a type of IntArgumentListData.

In your definition of IntArgumentListData, you have already specified the properties title and content.

Therefore, what you may want to do is something like this:

const props = defineProps<{
  tabsData: IntArgumentListData[];
}>();

Then in your component, you only need to iterate over the tabsData array.

NOTE: While using defineProps, the props will be accessible directly in the template without using props.tabsData; but in the script setup section, you need to access it using props.tabsData

<TabPanel v-for="tab in tabsData" :key="tab.title" :header="tab.title">

By doing this, the prop will be available on the component when used within the parent component. You will then need to bind the data to the prop when calling the component.

<ArgumentTabComponent :tab-data="tabsData" />

Useful documentation references:

In-depth guide on declaring props

Could you please provide an English translation of the error message?

The translated version might look something like this:

<script setup lang="ts">
//import { reactive, ref, computed } from "vue";
import ArgumentTabComponent from "./components/ArgumentTabComponent.vue";
import $t from "@/core/utils/i18n/translate";
import Button from "primevue/button";
import type { IntArgumentListData } from "./types/IntArgumentListData";

const tabsData: IntArgumentListData[] = [
  {
    title: "Argument 1",
    content: "text1",
  },
  {
    title: "Argument 2",
    content: "text2",
  },
  {
    title: "Argument 3",
    content: "text3",
  },
  {
    title: "Argument 4",
    content: "text4",
  },
  {
    title: "Argument 5",
    content: "text5",
  },
];

const handleRedirect = () => {
  alert("Accepting!");
};
</script>

<template>
  <br />
  <h1>Arguments</h1>
  <div class="">
    <ArgumentTabComponent :tabs-data="tabsData" />
    <hr />
    <Button :label="$t('common.accept')" @click="handleRedirect" />
  </div>
</template>

Child:

<script setup lang="ts">
import TabView from "primevue/tabview.vue";
import TabPanel from "primevue/tabpanel.vue";

// Lib imports
//import { ref } from "vue";
import type { IntArgumentListData } from "../types/IntArgumentListData";

// Properties
const props = defineProps<{
  tabsData: IntArgumentListData[];
}>();
</script>

<template>
  <br />
  <div class="">
    <TabView>
      <TabPanel v-for="tab in tabsData" :key="tab.title" :header="tab.title">
        <p>{{ tab.content }}</p>
      </TabPanel>
    </TabView>
  </div>
  <br />
</template>

Passing properties from the parent component to the child component in Vue3JS using TypeScript

Answer №1

Similar questions

Utilize the useState hook to update state when changes occur in the

Having difficulty casting the parameter type from Array.find() in TypeScript

Angular - Error: Cannot read property 'publishLast' of undefined

The v-validate feature in Vue.js seems to be encountering issues when used in conjunction with

"Error: The angularjs code is unable to access the $http variable within

Is there anything else I should attempt in order to fix this npm start error?

When `strictNullChecks` is turned on, how does the `void` type differ from the `undefined` literal type?

Guide on transferring control from a successful jQuery event to an HTML form

Error: The parent selector "&" cannot be used in top-level selectors. $::webkit-input-placeholder

Issue with Vue @Watch not properly recognizing changes in a boolean value

How come the mongoose ref feature is not functioning properly for me when I attempt to reference objects from a different schema?

FabricJS Canvas with a React DropDown Feature

What is the best way to highlight and extract only the white-coded texts on VSCode to facilitate the process of translating webpages manually?

Mapping custom colors to paths in D3 Sunburst visualizations can add a vibrant and unique touch

What could be causing the bootstrap 4 col-md-3 block to shrink when using position fixed?

Failed to execute test suite in React and Jest framework

Is there a way to establish a connection between two excel entries using Angular?

Extracting information from JSON using jQuery

What could be the reason for Angular to merge the element at index 0 of an array into a subarray instead of doing

Ionic3 footer using ion-tabs