Tips on implementing v-bind with multiple object arrays in Vue3 using TypeScript

Question

Tips on implementing v-bind with multiple object arrays in Vue3 using TypeScript

Working with vue3 + vite + ts, I customized a text editor using tiptap. However, when I try to access item.type , item.icon, or any other item attributes, they all show 'error'.

This indicates that ToolbarItem | Divider does not have certain attributes:

item.type => Property 'type' does not exist on type 'ToolbarItem | Divider', Property 'type' does not exist on type 'ToolbarItem'

,

In the parent component code:

<template v-for="(item, index) in items" :key="index">
    <div v-if="item.type === 'divider'" class="divider" :key="`divider${index}`" />
    <Child v-else :key="index"
            :icon="item.icon" :title="item.title"
            :action="item.action" :isActive="item.isActive"/>
</template>

interface ToolbarItem {
    icon: string,
    title: string,
    action: Function,
    isActive?: Function
}

interface Divider {
    type: string
}

const items: Array<ToolbarItem | Divider> = [
    {
        icon: 'bold',
        title: 'Bold',
        action: () => props.editor.commands.toggleBold(),
        isActive: () => props.editor.isActive('bold'),
    },
    {
        type: 'divider'
    },
    ...
]

In the Child component code:

interface ToolbarButtonProps {
    icon: string,
    title: string,
    action: Function,
    isActive?: Function
}

const props = defineProps<ToolbarButtonProps>()

I am looking for a way to inject items separately into the div or Child components to avoid the error messages.

typescript vuejs3 typeerror tiptap

Answer 1

Answer №1

that say ToolbarItem | Divider not have each other attributes

As indicated by the error message, the objects in your array lack similar properties. JavaScript permits accessing properties that are not present in an object. For example:

const fruit = { shape: 'round', color: 'red' };
console.log(fruit.size); // undefined

While JavaScript allows this behavior, it is not recommended as it can lead to confusion and readability issues in the code. TypeScript identifies this problem and raises a complaint.

To resolve the TypeScript error, you can rethink how you structure your template. Consider the following approach:

<template v-for="(item, index) in items" :key="index">
    <div v-if="item.type === 'divider'" class="divider" :key="`divider${index}`" />
    <Child v-else :key="index"
            :icon="item.icon" :title="item.title"
            :action="item.action" :isActive="item.isActive"/>
</template>

By modifying the code in this way, you can eliminate the need for a standalone "divider" element in the items array and simplify the rendering logic for Child components.

For a more concise structure, consider the revised template below:

<template>
  <section v-for="(item, index) in items" :key="index">
    <Child
      :key="index"
      :action="item.action"
      :icon="item.icon"
      :isActive="item.isActive"
      :title="item.title"
    />
    <div
      v-if="index < items.length"
      :key="`divider${index}`"
      class="divider"
    />
  </section>
</template>

This revised structure eliminates the need for explicitly checking and rendering the Child component based on a specific condition.

const items: Array<ToolbarItem> = [
  {
    icon: 'bold',
    title: 'Bold',
    action: () => props.editor.commands.toggleBold(),
    isActive: () => props.editor.isActive('bold'),
  },
  ...
]

For better clarity and efficiency, you can refer to this example.

Answer 2

that say ToolbarItem | Divider not have each other attributes

As indicated by the error message, the objects in your array lack similar properties. JavaScript permits accessing properties that are not present in an object. For example:

const fruit = { shape: 'round', color: 'red' };
console.log(fruit.size); // undefined

While JavaScript allows this behavior, it is not recommended as it can lead to confusion and readability issues in the code. TypeScript identifies this problem and raises a complaint.

To resolve the TypeScript error, you can rethink how you structure your template. Consider the following approach:

<template v-for="(item, index) in items" :key="index">
    <div v-if="item.type === 'divider'" class="divider" :key="`divider${index}`" />
    <Child v-else :key="index"
            :icon="item.icon" :title="item.title"
            :action="item.action" :isActive="item.isActive"/>
</template>

By modifying the code in this way, you can eliminate the need for a standalone "divider" element in the items array and simplify the rendering logic for Child components.

For a more concise structure, consider the revised template below:

<template>
  <section v-for="(item, index) in items" :key="index">
    <Child
      :key="index"
      :action="item.action"
      :icon="item.icon"
      :isActive="item.isActive"
      :title="item.title"
    />
    <div
      v-if="index < items.length"
      :key="`divider${index}`"
      class="divider"
    />
  </section>
</template>

This revised structure eliminates the need for explicitly checking and rendering the Child component based on a specific condition.

const items: Array<ToolbarItem> = [
  {
    icon: 'bold',
    title: 'Bold',
    action: () => props.editor.commands.toggleBold(),
    isActive: () => props.editor.isActive('bold'),
  },
  ...
]

For better clarity and efficiency, you can refer to this example.

Tips on implementing v-bind with multiple object arrays in Vue3 using TypeScript

Answer №1

Similar questions

Managing multiple `ng-content` slots in Angular can be a daunting task. Here

What is the best way to include a Web Service within an export variable in Angular 2 using TypeScript?

Angular promise not triggering loop creation

Error message received when making an API call in React Native for Android and saving the response to a local database: 'Error: Network

Error TS7053 occurs when an element is given an 'any' type because a 'string' expression is being used to index an 'Object' type

Tips for accessing the type of a nested union in TypeScript

What benefits does Observable provide compared to a standard Array?

Obtain a controller's reference from a callback by utilizing TypeScript

Encountering an issue with importing an enum: An error is triggered stating 'Variable implicitly has type 'any' in certain areas where its type remains undetermined.'

Reattempting a Promise in Typescript when encountering an error

Unraveling the mysteries of Typescript with async await

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

What is the reason for TypeScript allowing this promise chain without any compilation errors?

Tips for improving the slow compilation of the Next.js 14 development environment

Adding to object properties in Typescript

Creating click event handler functions using TypeScript

The issue with APP_INITIALIZER is that it fails to resolve promises before moving on to other

Setting up shortcuts for webpack using lerna and typescript

Error: Name 'AudioDecoder' could not be located

Angular - Execute function every 30 seconds while considering the duration of the function execution