nhayder
6 months ago
8
0
Vue

I'm getting error when i attempt to bind data passed from getter filter function

Posted 6 months ago by nhayder

i'm filtering vuex store pages object bussing getter like this

    getters: {
       getPageSettings: (state) => (id) => {

            return state.pages.find(pages => pages.id === id)

        }
    }

and from my component i'm able to display that data properly,

  computed:{

        page () {

            return this.$store.getters.getPageSettings(this.id)

        }

    },

i'm binding data on my component like this

<input v-model="page.name" type="text" name="name">

<input v-model="page.slug"  type="text" name="slug">

i'm able to see correct data on abve form so there is nothing wrong with it apart from error i'm seeing on chrome dev tools

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"

Well, The name is defined and save on the store/state/pages object

[

* {
  * id: 3,

  * created_at: "2019-05-16 06:26:44",

  * updated_at: "2019-05-16 06:26:44",

  * name: "services",

  * homepage: 0,

  * direction: "0",

  * language_id: "en",

  * position: 0,

  * keywords: "Keyword1, keyword2, keyword3",

  * description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim tellus, efficitur a urna id, dictum ornare quam. Nunc volutpat justo ut tortor fermentum finibus. Donec vulputate faucibus convallis",

  * smcard: "placeholder.png",

  * slug: "services",},

* {
  * id: 2,

  * created_at: "2019-05-16 06:26:44",

  * updated_at: "2019-05-16 06:26:44",

  * name: "about us",

  * homepage: 0,

  * direction: "0",

  * language_id: "en",

  * position: 0,

  * keywords: "Keyword1, keyword2, keyword3",

  * description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim tellus, efficitur a urna id, dictum ornare quam. Nunc volutpat justo ut tortor fermentum finibus. Donec vulputate faucibus convallis",

  * smcard: "placeholder.png",

  * slug: "about-us",},

* {
  * id: 1,

  * created_at: "2019-05-16 06:26:44",

  * updated_at: "2019-05-16 06:26:44",

  * name: "home",

  * homepage: 1,

  * direction: "1",

  * language_id: "en",

  * position: 0,

  * keywords: "Keyword1, keyword2, keyword3",

  * description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas enim tellus, efficitur a urna id, dictum ornare quam. Nunc volutpat justo ut tortor fermentum finibus. Donec vulputate faucibus convallis",

  * smcard: "placeholder.png",

  * slug: "home",},

]

so basically the data is being binded and i can see them on the form but chrome dev tools is still giving me error ???

Any idea what is going on

Please sign in or create an account to participate in this conversation.