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>范围内调用父组件的方法

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

e.g。

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

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

1 个答案: