小编s16*_*231的帖子

Prop 可能是 Vue 3 设置中的未定义错误

效果console.log('test',props.list)很好。但props.list.map不起作用。这是错误消息。

在此输入图像描述

这是组件的代码如何修复此错误?

<template>
  <div class="row">
      <div v-for="column in columnList" :key="column.id" class="col-4 mb-4">
          <div class="card-body">
            <div class="card h-100 shadow-sm" >
                <img :src="column.avatar" :alt="column.title">
                <h5>{{column.title}}</h5>
                <p>{{column.description}}</p>
                <a href="#" class="btn btn-primary">enter</a>
            </div>
          </div>

      </div>
  </div>
</template>

<script lang='ts'>
import { computed, defineComponent, PropType } from 'vue'

export interface ColumnProps{
    id: number;
    title: string;
    avatar?: string;
    description: string;
}

export default defineComponent({
  name: 'ColumnList',
  props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      require: true
    }
  },
  setup (props) {
    const …
Run Code Online (Sandbox Code Playgroud)

javascript typescript vue.js vue-component vuejs3

5
推荐指数
2
解决办法
2万
查看次数

标签 统计

javascript ×1

typescript ×1

vue-component ×1

vue.js ×1

vuejs3 ×1