Reputation: 69

Sending an Array of Objects to a component in vuejs

I'm a begginer in web development and i'm trying to make a front end using vuejs and vuetify. My problem is that i can't figure out why I can't pass an array of objects to a component.

My code is the following :

In my main page i got these lines to use the component :

<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>

And my component is like that:

<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>

At this point, i don't have enough knowledge on vue to understand what is exactly going on here, but what i'm trying to do is to give a list of objects (which can be a list of clients or a list of vehicles or anything) to my component.

The List2 component shouldn't be aware of what it is displaying as long as it gets some objects with a title and a description.

I use a computed property on the component, because i don't know if it's recommended to do a v-for on the props.

And I constantly get this error :

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)

Along with these warnings :

[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>

But i have no filter property in my main page or my component, so i don't get why...

So my question are : Is my approach correct, or am i doing it the wrong way? What should I do to in order to make it work ?

And if you have some tips/advices for a beginner, i'm definetly up to get them ! Thank you !

Upvotes: 0

Answers (3)

tony19

Reputation: 138656

This is what's happening in your code...

Vue allows specifying a prop of a specific data type like this:

props: {
  foo: String
}

or with multiple valid types like this:

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

The type array ([String, Number] in the example above) should not be empty:

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

This is how to fix it...

If you were attempting to enable type checking for the prop so that Vue enforced values of type Array, the correct syntax would be:

props: {
  foo: Array
}

Or if you were trying to specify an empty array as the default prop value:

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

You could even do both:

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

demo

But i have no filter property in my main page or my component, so i don't get why...

Although I wasn't able to reproduce that error with the code shown in question, I'm guessing you have a third-party library/component that perhaps uses Array#filter on your array prop.

Upvotes: 1

Faure Ugo

Reputation: 69

I had this empty section in my list :

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

And that was causing the filter error, i just had to delete it, thank you for your answers !

Upvotes: 0

Stephen Thomas

Reputation: 14053

You probably want to define your property with a default value

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

BTW: