Question

我的Vue和组件数据功能有问题。即使所有引用的prop数据都正确地传递给组件，我也可以在vue-devtools中看到它们。我从Laravel传递数据。

Vue错误：

[Vue warn]: Error in data(): "TypeError: Cannot read property 'isFavorited' of undefined"

found in

---> <FavBtn> at /Applications/MAMP/htdocs/decimacen.cz/resources/assets/js/components/FavBtn.vue
       <Root>

FavBtn组件：

<template>
    <a href="#" class="btn-link text-danger" v-on:click="ToggleFav">
        <i v-bind:class="{ 'fa fa-heart fa-2x': isFavorited == true, 'fa fa-heart-o fa-2x': isFavorited == false }" class="" aria-hidden="true"></i>
    </a>
</template>

<script>
    export default {

        name: 'FavBtn',

        props: ['fav'],

        data(){
            return{

                isFavorited: this.fav.isFavorited,
                favoritable_id: this.fav.favoritable_id,
            }
        },

        methods: {
            ToggleFav: function () {
                this.AjaxRequest();
                this.ToggleDOM();
            },

            ToggleDOM: function () {
                this.isFavorited = !(this.isFavorited);
            },

            AjaxRequest: function () {
                if (this.isFavorited)
                {
                    axios.delete('favorites/' + this.favoritable_id)
                }

                else {
                    axios.post('favorites/' + this.favoritable_id);
                }
            }
        }
    }
</script>

以下是我在视图中使用compnent的方法：

<fav-btn v-bind:fav="{{ $user_store }}"></fav-btn>

我想知道的是我的代码中是否有任何错误。感谢。

修改

来源：

<fav-btn v-bind:fav="{&quot;favoritable_id&quot;:3,&quot;favoritable_type&quot;:&quot;App\\Store&quot;,&quot;created_at&quot;:&quot;2017-05-24 16:12:33&quot;,&quot;updated_at&quot;:&quot;2017-05-24 16:12:33&quot;,&quot;deleted_at&quot;:null,&quot;isFavorited&quot;:true,&quot;pivot&quot;:{&quot;user_id&quot;:1,&quot;favoritable_id&quot;:3},&quot;users&quot;:[{&quot;id&quot;:1,&quot;email&quot;:&quot;hagen@wagen.cz&quot;,&quot;permissions&quot;:[],&quot;last_login&quot;:&quot;2017-05-25 13:38:38&quot;,&quot;name&quot;:&quot;Franta Hagen&quot;,&quot;currency_id&quot;:1,&quot;sid&quot;:&quot;1400076495925ae8d480b95925ae8d480c3&quot;,&quot;created_at&quot;:&quot;2017-05-24 16:02:21&quot;,&quot;updated_at&quot;:&quot;2017-05-25 13:38:38&quot;,&quot;deleted_at&quot;:null,&quot;pivot&quot;:{&quot;favoritable_id&quot;:3,&quot;user_id&quot;:1}}]}"></fav-btn>

Vue无法访问道具数据

0 个答案: