Question

我很难尝试隔离控制台错误。

我的代码如下：

myside.blade.php有：

<div class="nav-container">
                    <ul class="nav nav-icons justify-content-center" role="tablist">
                        <li class="nav-item">
                            <div>
                                <router-link class="nav-link text-primary" :to="{ name: 'property', params: { customerId: {{ $property_data[0]->listingId }} }}" @click.native="isVisible = !isVisible">
                                    <i class="nc-icon nc-key-25"></i>
                                    <br> Property
                                </router-link>
                            </div>
                        </li>
                        <li class="nav-item">
                            <router-link class="nav-link text-primary" :to="{ name: 'booking' }" @click.native="isVisible = !isVisible">
                                <i class="nc-icon nc-chart-pie-36"></i>
                                <br> Bookings
                            </router-link>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-primary" href="" role="tab">
                                <i class="nc-icon nc-preferences-circle-rotate"></i>
                                <br> Performance
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-primary" href="" role="tab">
                                <i class="nc-icon nc-money-coins"></i>
                                <br> Revenue
                            </a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-primary" href="" role="tab">
                                <i class="nc-icon nc-layers-3"></i>
                                <br> Integration
                            </a>
                        </li>
                    </ul>
                </div>

                <property-page :customer-Id="{{ $property_data[0]->listingId }}" v-if="isVisible"></property-page>

                <router-view></router-view>

我的routes.js文件：

    import VueRouter from 'vue-router';

let routes = [
    {

        path: '/property/:customerId',
        name: 'property',
        component: require('./components/PropertyPage'),
        props: true

    },
    {

        path: '/booking',
        name: 'booking',
        component: require('./components/BookingPage')

    }
];

export default new VueRouter({

    routes,
    linkActiveClass: 'nav-link text-success'

});

我的app.js文件：

import Vue from 'vue';

import VueRouter from 'vue-router';

Vue.use(VueRouter);

import router from './routes';


import PropertyPage from './components/PropertyPage.vue';

import BookingPage from './components/BookingPage.vue';

new Vue({

    el: '#root',

    router,

    data: {

        NavPrimaryClass: 'nav-link text-primary',

        NavClass: 'nav-link',

        isVisible: true

    },

    components: {

        'property-page': PropertyPage,
        'booking-page': BookingPage

    }

})

我的PropertyPage.vue文件：

<template>
    <div>

        <div class="ajax-loader">
            <img src="/loader/ajax-loader.gif" width="300px" v-if="loading" />
        </div>

        <div v-if="propertyDataCheck">



        </div>



    </div>
</template>

<script>

    import moment from 'moment';

    import axios from 'axios';

    export default {

        props: {

            customerId: {
                type: Integer,
                required: true,
                default: 0
            }

        },

        data() {

            return {
                propertyData: [], 
                loading: false
            }

        },

        computed: {
            propertyDataCheck () {
                return this.propertyData.length;
            }
        },

        mounted() {

            this.loading = true;

            axios.get('/ajax/propertydata/' + this.customerId)
                .then(function(response) {
                    this.propertyData = response.data;
                    this.loading = false;
                }.bind(this))
                .catch(function() {
                  this.loading = false;
                }.bind(this));

        }

    }
</script>

<style>
.ajax-loader {
  position: absolute;
  left: 40%;
  top: 15%;
  margin-left: -32px; /* -1 * image width / 2 */
  margin-top: -32px; /* -1 * image height / 2 */
}
</style>

最终结果是一个控制台错误，我花了几个小时试图弄清楚它来自哪里。

错误：

[vue-router] missing param for named route "property": Expected "customer" to be defined

我需要在页面加载时加载一个组件（在vue-router之外）这就是为什么我有<property-page :customer-Id="{{ $property_data[0]->listingId }}" v-if="isVisible"></property-page>个标签并绑定到一个方法，它将切换路由器链接点击（如果你想知道）。

我对这个错误的理解是第一个路由器链路的变量，它是从一个Laravel模型数据库生成的{{ $property_data[0]->listingId }}生成的，应该在一个v-if包围vue-router的范围内检查？我也这样做无济于事。

非常感谢任何帮助！

Answer 1

信不信由你，你需要在vue-templates中使用严格的kebab-case（全部小写！）html-properties。将customer-Id更改为customer-id

<property-page :customer-Id=...  // does not get mapped to this.customerId
<property-page :customer-id=...  // does get mapped to this.customerId, yay!

Laravel Vuejs2缺少命名路线的参数

1 个答案: