Laravel Vuejs2缺少命名路由的参数

我很难找出控制台错误

我的代码如下：

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>

我的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

    }

})

my 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路由器外部的页面加载时加载一个组件，这就是为什么我有标记，并且绑定到一个方法，该方法将在路由器链接单击时切换，以防您感到奇怪

我对这个错误的理解是，第一个路由器链接的变量是从Laravel模型数据库查询生成的{{{$property_data[0]->listingId}}应该在围绕vue路由器的v-if中检查吗？我这样做也是徒劳的

---

任何帮助都将不胜感激

信不信由你，你需要使用严格的烤肉串大小写所有小写！vue模板中的html属性。将客户Id更改为客户Id

---

请注意，昨天我重新启动了计算机，今天我只收到了错误，没有代码更改。我使用的是Laravel 5.6，正在进行php artisan缓存：很明显，我发现对vue文件进行更改并没有反映对前端的更改。Chrome允许浏览缓存，甚至可以对laravel mix进行版本控制。您的回答仍然是问题的答案和最佳实践，因此感谢您的支持！

<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

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