数据未加载到 Vue 应用程序的编辑表单中

Question

我正在用 Laravel 试验 Vue.js 和 Axios。我正在使用本教程构建一个简单的帖子应用程序：https://pusher.com/tutorials/laravel-vue-axios。我正在尝试使用更新功能来扩展它。当我单击帖子附近的编辑按钮时，会获取正确的 ID。但是在我的编辑表单中，帖子的数据没有加载。可能是什么问题？

这是我在 EditPost.vue 中的代码：

<template>
    <form action="" @submit="editPost(post)">
        <h4 class="text-center font-weight-bold">Post edit form</h4>
        <div class="form-group">
            <input type="text" placeholder="title" class="form-control"> {{ post.title }}
        </div>
        <div class="form-group">
            <textarea placeholder="content" class="form-control" v-model="post.content">
            </textarea>
        </div>
        <div class="form-group">
            <button :disabled="!isValid" class="btn btn-block btn-primary" @click.prevent="updatePost(post)">Update
            </button>
        </div>
    </form>
</template>

<script>

    import {mapGetters, mapActions} from 'vuex'

    export default {
        name: "EditPost",
        data() {
            return {
                post:{}
            }
        },
        created () {
            this.fetchData();
        },

        mounted() {
            this.$store.dispatch('fetchPost')
        },
        methods: {
            ...mapActions('post', [
                'fetchPost',
                'updatePost'
            ]),
            updatePost(post) {
                this.$store.dispatch('updatePost', post)
            },
            fetchData: function () {
                var _this = this;
                // ajax call - then
                _this.$store.commit('setData', {
                    name: 'post',
                    data: res.data.post
                });
            }
        },
        computed: mapGetters([
            'posts'
        ])

    }

</script>

这是resources/js/store/actions.js中的代码：

fetchPost({commit}, post) {
    axios.get(`/api/posts/${post.id}`)
        .then(res => {
            commit('FETCH_POST', res.data)
        }).catch(err => {
        console.log(err)
    })
},

更新：我添加了额外的代码。

文件 Posts.vue：

<template>
    <div>
        <h4 class="text-center font-weight-bold">Posts</h4>
        <table class="table table-striped">
            <thead>
            <tr>
                <th scope="col">Title</th>
                <th scope="col">Content</th>
                <th scope="col">Actions</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="post in posts">
                <td>{{post.title}}</td>
                <td>{{post.content}}</td>
                <td>
                    <button class="btn btn-info" @click="editPost(post)"><i style="color:white" class="fa fa-edit"></i></button>
                    <button class="btn btn-danger" @click="deletePost(post)"><i style="color:white" class="fa fa-trash"></i></button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

</template>

<script>
    import {mapGetters} from 'vuex'

    export default {
        name: "Posts",
        mounted() {
            this.$store.dispatch('fetchPosts')
        },
        methods: {
            editPost(post) {
                this.$store.dispatch('fetchPost',post)
            },
            deletePost(post) {
                this.$store.dispatch('deletePost',post)
            }
        },
        computed: {
            ...mapGetters([
                'posts'
            ])
        }
    }
</script>

文件资源/js/store/getters.js：

let getters = {
     posts: state => {
         return state.posts
     }
}

export default getters

文件资源/js/store/state.js：

let state = {
    posts: []
}

export default state

文件资源/js/store/mutations.js：

let mutations = {
    CREATE_POST(state, post) {
        state.posts.unshift(post)
    },
    FETCH_POSTS(state, posts) {
        return state.posts = posts
    },
    UPDATE_POST(state, post) {
        let index = state.posts.findIndex(item => item.id === post.id)
    },
    DELETE_POST(state, post) {
        let index = state.posts.findIndex(item => item.id === post.id)
        state.posts.splice(index, 1)
    }
}
export default mutations

Answer 1

您正在使用post.content，它来自您的数据道具post。我没有看到您在代码中的任何位置向 post 添加内容。

我假设您的 getter posts 正在从商店获取帖子数据。

所以也许你只需要改用它？

v-model="posts.content">

没有看到更多你的代码，我无法告诉你具体该怎么做。但是您的主要问题是在更新存储值之后，您需要以某种方式获取该值。