javascript - Vue js v-bind to function not working? -
trying generate dynamic url hyper-link, users can navigate specific customer page id.
<template> <list baseurl="/ajax/admin/customers" ordering="id" paginationoffset="20" inline-template> <div class="row"> <loader :loading="loading"></loader> <div class="col-sm-12" v-if="!loading"> <div class="row"> <div class="col-sm-6"> <h4>showing {{ pagination.total }} results</h4> </div> <div class="col-sm-6 "> <!--this button calls opencanvas method triggers open-canvas event--> <button @click.prevent="opencanvas()" class="btn btn-default pull-right" id="newcustomer">new customer </button> </div> </div> <table class="table admin-table"> <thead> <tr> <th class=""> id <a><i class="mdi mdi-sort" aria-hidden="true" @click.prevent="order('id')" :class="{active: (orderby == 'id')}"></i> </a> </th> <th class=""> title <a><i class="mdi mdi-sort" aria-hidden="true" @click.prevent="order('first_name')" :class="{active: (orderby == 'first_name')}"></i> </a> </th> <th class="hidden-xs"> account <a><i class="mdi mdi-sort" aria-hidden="true" @click.prevent="order('account')" :class="{active: (orderby == 'account')}"></i> </a> </th> <th class="hidden-xs"> company <a><i class="mdi mdi-sort" aria-hidden="true" @click.prevent="order('company')" :class="{active: (orderby == 'company')}"></i> </a> </th> <th class="hidden-xs"> email <a><i class="mdi mdi-sort" aria-hidden="true" @click.prevent="order('email')" :class="{active: (orderby == 'email')}"></i> </a> </th> <th class="hidden-xs"> phone <a><i class="mdi mdi-sort" aria-hidden="true" @click.prevent="order('phone')" :class="{active: (orderby == 'phone')}"></i> </a> </th> <th class=""> city <a><i class="mdi mdi-sort" aria-hidden="true" @click.prevent="order('city')" :class="{active: (orderby == 'city')}"></i> </a> </th> <th class="hidden-xs"> country <a> <i class="mdi mdi-sort" aria-hidden="true" @click.prevent="order('country')" :class="{active: (orderby == 'country')}"></i> </a> </th> <th class=""> created <a><i class="mdi mdi-sort" aria-hidden="true" @click.prevent="order('created_at')" :class="{active: (orderby == 'created_at')}"></i> </a> </th> </tr> </thead> <tbody> <tr v-for="item in items" :key="item.id"> <td><a v-bind:href="generatecustomerurl(item.id)" title="navigate customer page"> {{ item.id }} </a> </td> <td v-text="fullname(item)"> </td> <td> {{ item.type }} </td> <td> {{ item.company }} </td> <td class="hidden-xs"> {{ item.email }} </td> <td class="hidden-xs"> {{ item.phone }} </td> <td class="hidden-xs"> {{ item.city }} </td> <td> {{ item.country }} </td> <td class="hidden-xs"> {{ item.created }} </td> </tr> </tbody> </table> <div class="row"> <div class="pagination-container"> <pagination :pagination="pagination" :offset="20"></pagination> </div> </div> </div> </div> </list> </template> the function declared in module's methods
/** * private methods vue class * **/ methods: { clearsearch() { this.filters.search = ''; eventbus.fire('apply-filters', this.serializedfilter); }, generatecustomerurl(id) { return "/admin/customers/" + id; } }, however vue js errors saying
vm.generatecustomerurl not function stack trace:
how can generate url dynamically vue.js 2.0 without using interpolation (which disabled).
the issue due component nesting in vue.js, trying call parent component's methods whilst inside scope of <list></list>
the solution pass method property list component
e.g.
<list generateurl=this.generateurl></list> 
Comments
Post a Comment