Vue js v-bind to function不起作用?

Question

尝试为超链接生成动态 URL，以便用户可以按 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 the openCanvas method which then triggers the 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 to 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>

该函数在模块的方法中声明

/**
* Private methods for this vue class
*
**/
methods: {
clearSearch() {
this.filters.search = '';
EventBus.fire('apply-filters', this.serializedFilter);
},
generateCustomerUrl(id) {
return "/admin/customers/" + id;
}
},

但是 vue js 错误说

vm.generateCustomerUrl 不是一个函数堆栈跟踪：

如何在不使用插值(已禁用(的情况下为 Vue.js 2.0 动态生成 URL。

Answer 1

该问题是由于 Vue.js 中的组件嵌套，试图在<list></list>范围内调用父组件的方法

解决方案是将方法作为属性传递给列表组件

例如

<list generateUrl=this.generateUrl></list>