Question

我是Web开发的入门者，我正在尝试使用vuejs和vuetify开发前端。我的问题是我无法弄清楚为什么不能将对象数组传递给组件。

我的代码如下：

在我的主页上，我获得了以下这些行以使用组件：

<template>
   ...
   <v-content>
      ...
      <list-2 :objectsProps="clients"/>
      ...
   </v-content>
   ...
</template>

-----------------------
<script>
import List2 from "./components/List2";


export default {
  name: "App",
  components: {
    List2
  },
  data() {
    return {
      ...
      clients: [],
      ...
    };
  },
  ...
  mounted() {
    this.clients = [
      {
        title: "Client1",
        description: "Unknown"
      },
      {
        title: "Client2",
        description: "Unknown"
      },
      {
        title: "Pradier",
        description: "Unknown"
      }
    ];
  }
};
</script>

我的组件就是这样：

<template>
    <v-card>
        <v-list two-line subheader>
            <v-subheader>List</v-subheader>

            <v-list-tile v-for="object in objects" :key="object.title" avatar>
                <v-list-tile-avatar>
                    <v-icon x-large>account_circle</v-icon>
                </v-list-tile-avatar>

                <v-list-tile-content>
                    <v-list-tile-title>{{ object.title }}</v-list-tile-title>
                    <v-list-tile-sub-title>{{ object.description }}</v-list-tile-sub-title>
                </v-list-tile-content>

                <v-list-tile-action>
                </v-list-tile-action>
            </v-list-tile>
        </v-list>
    </v-card>
</template>


<script>
export default {
  name: "List2",
  props: {
    objectsProps: []
  },
  data() {
    return {
    };
  },
  computed:{
      objects: function(){
          return this.objectsProps
      }
  }
};
</script>

在这一点上，我对vue的了解不足，无法理解这里到底发生了什么，但是我想做的是提供对象列表（可以是客户端列表或车辆清单或其他内容）。

只要List2组件获得一些带有标题和描述的对象，就不应该知道它所显示的内容。

我在组件上使用了计算属性，因为我不知道是否建议对道具进行v-for。

我经常收到此错误：

TypeError: Cannot read property 'filter' of undefined
    at render (vuetify.js:7048)
    at createFunctionalComponent (vue.runtime.esm.js:4056)
    at createComponent (vue.runtime.esm.js:4246)
    at _createElement (vue.runtime.esm.js:4416)
    at createElement (vue.runtime.esm.js:4353)
    at vm._c (vue.runtime.esm.js:4485)
    at List2.vue?36c9:37
    at Proxy.renderList (vue.runtime.esm.js:3701)
    at Proxy.render (List2.vue?36c9:13)
    at VueComponent.Vue._render (vue.runtime.esm.js:4540)

伴随这些警告：

[Vue warn]: Invalid prop: type check failed for prop "objectsProps". Expected , got Array.

found in

---> <List2> at src/components/List2.vue
       <VContent>
         <VApp>
           <App> at src/App.vue
             <Root>
vue.runtime.esm.js:587 [Vue warn]: Error in render: "TypeError: Cannot read property 'filter' of undefined"

found in

---> <List2> at src/components/List2.vue
       <VContent>
         <VApp>
           <App> at src/App.vue
             <Root>

但是我的主页或组件中没有过滤器属性，所以我不知道为什么...

所以我的问题是：我的方法正确吗，还是我做错了方法？我应该怎么做才能使其正常工作？

如果您对初学者有一些提示/建议，那么我一定会尽力帮助您！谢谢！

Answer 1

您可能想用默认值定义属性

props: {
    objectsProps: {
        type: Array,
        default() {
            return [];
        }
    }
}

顺便说一句：

我在组件上使用了计算属性，因为我不知道是否建议对道具进行v-for。

不需要计算属性

Answer 2

这就是您的代码中正在发生的事情...

Vue允许指定specific data type中的prop，如下所示：

props: {
  foo: String
}

或具有多个这样的有效类型：

props: {
  foo: [String, Number] // foo can be a `String` or a `Number`
}

类型数组（上例中的[String, Number]）不能为空：

props: {
  foo: [] // invalid: missing types
}

这是解决方法...

如果您尝试启用prop的类型检查，以使Vue强制使用类型Array的值，则正确的语法应为：

props: {
  foo: Array
}

或者，如果您尝试将空数组指定为默认prop值：

props: {
  foo: {
    default: () => []
  }
}

您甚至可以同时进行以下操作：

props: {
  foo: {
    type: Array,
    default: () => []
  }
}

demo

但是我的主页或组件中没有过滤器属性，所以我不知道为什么...

尽管我无法使用所显示的代码重现该错误，但我猜测您有一个第三方库/组件，它可能在数组prop上使用了Array#filter。

Answer 3

我的列表中有这个空白部分：

<v-list-tile-action>
</v-list-tile-action>

那是导致过滤器错误的原因，我只需要删除它，谢谢您的回答！

将对象数组发送到vuejs中的组件

3 个答案:

这就是您的代码中正在发生的事情...

这是解决方法...