Question

我在访问Vue组件中的数据时遇到问题我使用prop将我的数据从视图传递到这样的组件。我正在使用Laravel。

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

我的组件看起来像这样：

<template>
    <a href="#" class="btn-link text-danger" v-on:click="favorite">
        <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 {

        props: ['store'],

        data(){
            return{

                isFavorited: this.store.favoritable.isFavorited,

            }
        },

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

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

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

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

在Vue devtools中我可以看到道具中的所有对象，但我无法访问它们，isFavorited总是保持错误。我是否错误地访问了对象属性？

Answer 1

你做错了。你不应该贬低一个存储的值。您应该在商店文件中编写一个mutator并通过它更改值。这是文档。

https://vuex.vuejs.org/en/mutations.html

访问Vue组件数据

1 个答案: