Question

我知道在StackOverflow的其他几篇文章中也曾提出过这个问题，尽管我仍在努力解决问题。我是Vue的新手，尝试学习此堆栈，但是在这方面有些挣扎

问题：在接下来的教程中，我有一个名为“菜单编辑器”的页面，该页面使用Vue Router自动将用户重定向到“菜单编辑器”页面中名为“类别管理器”的子组件。但是，当在“菜单编辑器”页面上时，无论我到目前为止尝试过什么，prop数据都不会显示（阅读和尝试类似此类帖子中提出的解决方案）从我的菜单编辑器vue文件中，我知道问题出在 <router-view v-bind:inital-categories="categories"></router-view>

从我的app.js文件中，我已经注册了两个组件

   Vue.component('category-manager', require('./components/category-manager.vue').default);
   Vue.component('menu-editor', require('./components/menu-editor.vue').default);

我的menu-editor.vue文件

<template>
    <div>
        <h1>Menu Editor</h1>
        <router-link :to="{name: 'categories'}">Categories</router-link>
        <router-link :to="{name: 'add-item'}">Add Item</router-link>

        <router-view v-bind:inital-categories="categories"></router-view>
    </div>
</template>

<script>
    import VueRouter from 'vue-router';
    import CategoryManager from './category-manager.vue';
    import MenuItem from './menu-item.vue';

    export default {
        props:['categories'],
        router: new VueRouter({
            mode: 'history',
            routes: [
                {
                    path: '/categories',
                    name: 'categories',
                    component: CategoryManager
                },
                {
                    path: '/menu-editor',
                    redirect: {name: 'categories'}
                },
                {
                    path: '/add-item',
                    name: 'add-item',
                    component: MenuItem
                }
            ]
        })
    }
</script>

<style scoped>
    a{
        border: solid 1px black;
        padding: 10px;
        margin: 0;
    }

    .router-link-active{
        font-weight: bold;
        border-bottom: none;
    }
</style>

我的category-manager.vue文件

<template>
    <form  @submit.prevent="saveCategories">
        <a @click="addCategory(index)" class="add">+ add category</a>

        <div v-for="(category,index) of categories" :key="category.id">
            <input type="text" v-model="category.name" :ref="category.name">
            <input type="number" v-model="category.display_order">
            <a @click="removeCategory(index)" class="remove">delete</a>
            <div>
                <img v-if="category.image" :src="`/images/${category.image}`" width="100">
                <label v-else>Image: </label>
                <input type="text" v-model.lazy="category.image">
            </div>
            <hr>
        </div>
        <button type="submit">Save</button>
        <div>{{ feedback }}</div>
    </form>
</template>

<script>
    export default {
        props: ['initialCategories'],
        data(){
            return{
                categories: _.cloneDeep(this.initialCategories),
                feedback: '',
            };
        },
        methods: {
            removeCategory(index){
                if(confirm('are you sure?')){
                    let id = this.categories[index].id;
                    if(id > 0){
                        console.log('calling delete /api/categories/' + id);
                        axios.delete('/api/categories/' + id);
                    }
                    this.categories.splice(index,1);
                }
            },
            addCategory(index){
                this.categories.push({
                    id: 0,
                    name: '',
                    display_order: this.categories.length + 1
                });
                this.$nextTick(() =>{
                    window.scrollTo(0, document.body.scrollHeight);
                    this.$refs[''][0].focus();
                });
            },
            saveCategories(){
                axios.post('/api/categories/upsert', {
                    categories: this.categories
                })
                .then((res) => {
                    if(res.data.success){
                        this.feedback = 'Changes saved.';
                        categories = res.data.categories;
                    }
                });
            }
        }

    }
</script>

<style scoped>
    img {
        vertical-align: middle;
    }
    hr {
        margin-bottom: 30px;
    }
</style>

我的menu-editor.blade.php文件

@extends('layouts.app')

@section('title', '- Menu Editor')

@section('content')
    <menu-editor :categories="{{ $categories }}"></menu-editor>
@endsection

我的AdminController.php文件

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Categories;

class AdminController extends Controller
{
    //
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function menu(){
        //
        $categories = Categories::orderBy('display_order')->get();
        return view('admin.menu-editor', [
            'categories' => $categories
        ]);
    }
}

在“菜单编辑器”上时，视图将按原样返回

，返回给DOM的数据为“ [object Object]，[object Object]”，而不是正确呈现的对象。 inital-categories="[object Object],[object Object]"

但是，当我直接进入“ /类别”页面而没有首先进入“菜单编辑器”时，数据显示正常。

这是直接访问“类别”页面时的样子（与菜单编辑器一样，页面顶部没有两个菜单按钮）

有人可以告诉我我出了什么问题，以便我可以在Menu-Editor页面上正确显示道具数据吗？提前致谢！我确信我忽略了一些愚蠢的事情，但是对于在发现和修复错误方面的任何帮助，我们将不胜感激。

了解Vue子组件传递到路由器视图的道具，道具数据未渲染

0 个答案: