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

Question

效果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 columnList = computed(() => {
      console.log('test',props.list)
      return props.list.map(column => {
        if (!column.avatar) {
          column.avatar = require('../assets/default_avatar.jpg')
        }
        return column
      })
    })
    return { columnList }
  }
})
</script>

Answer 1

我认为，唯一缺少的一点是required选项中的拼写错误。

改变

props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      require: true
    }
  },

到

props: {
    list: {
      type: Array as PropType<ColumnProps[]>,
      required: true // <-----  CHANGE TO "required"
    }
  },

Answer 2

我猜这个listprop 是由异步调用填充的。props.list如果是这样，则计算在定义之前至少运行一次。当它未定义时，它没有.map方法。

\n

通过返回一个空数组来应对这种情况：

\n

setup (props) {\n  const columnList = computed(() => {\n    if (!props.list) return [];         // \xe2\x9c\x85 Return an empty array if undefined\n    return props.list.map(column => {\n      if (!column.avatar) {\n        column.avatar = require('../assets/default_avatar.jpg')\n      }\n      return column\n    })\n  })\n  return { columnList }\n}\n

\n