Vue js v-bind功能不起作用？答案

【问题标题】：Vue js v-bind to function not working?Vue js v-bind功能不起作用？
【发布时间】：2018-01-04 05:35:25
【问题描述】：

尝试为超链接生成动态 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。

【问题讨论】：

您的generateCustomerUrl 是计算属性吗？将其移至methods:。为什么你需要v-bind？
你能在你添加generateCustomerUrl()函数的地方添加整个代码
更新了@AndreyKudriavtsev
jsbin.com/safujat/edit?html,js,output 我尝试了一个示例，它可以找到。有什么问题？
在这里查看代码，它应该可以工作。 jsfiddle.net/choasia/s0t9jzsw

标签： javascript laravel vue.js vue-component

【解决方案1】：

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

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

例如

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

【讨论】：