Laravel Vuejs2 missing param for named route

Question

I am having a hard time trying to isolate the console error.

My code is as follows:

myside.blade.php has:

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

My routes.js file:

    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'

});

my app.js file:

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 file:

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

The end result, a console error which I have spent hours trying to work out where it is coming from.

Error:

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

I needed a component to be loaded upon page load (outside of vue-router) which is why I have <property-page :customer-Id="{{ $property_data[0]->listingId }}" v-if="isVisible"></property-page> tags and is bound to a method which will switch upon a router-link click (in case you were wondering).

My understanding of this error is the variable for the first router-link which is generated from a Laravel model DB query {{ $property_data[0]->listingId }} should be checked within a v-if wrapped around the vue-router? I have also done this to no avail.

Any help would be much appreciated!

Answer 1

Believe it or not, you need to use strict kebab-case (all lower case!) html-properties in vue-templates. Change customer-Id to customer-id

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