Vue js v-bind不工作?
16lz
2021-01-22
Trying to generate a dynamic URL for a hyper-link, so that users can navigate to a specific customer page by ID.
尝试为超链接生成动态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>
The function is declared in the module's methods
函数在模块的方法中声明。
/**
* Private methods for this vue class
*
**/
methods: {
clearSearch() {
this.filters.search = '';
EventBus.fire('apply-filters', this.serializedFilter);
},
generateCustomerUrl(id) {
return "/admin/customers/" + id;
}
},
However vue js errors saying
然而，vue js的错误说明。
vm.generateCustomerUrl is not a function Stack trace:
vm。generateCustomerUrl不是函数堆栈跟踪:
How can I generate a URL dynamically for Vue.js 2.0 without using interpolation (which is disabled).
如何动态地为Vue生成URL。js 2.0不使用插值(这是禁用的)。
1 个解决方案
#1
0
The issue was due to component nesting in Vue.js, trying to call the parent component's methods whilst inside the scope of <list></list>
问题是由于Vue中的组件嵌套。在
的范围内，尝试调用父组件的方法。
The solution was the pass the method as a property to the list component
解决方案是将方法作为属性传递给列表组件。
e.g.
如。
<list generateUrl=this.generateUrl></list>
更多相关文章
- 奈何两字拉成桥、不得不双击两次才能激活的JS方法
- javascript的offset、client、scroll使用方法，相关属性解释原理
- Objective-C方法/函数调用。 （来自javascript示例）
- Javascript函数的4种调用方法详解
- JQuery纯前端导入Excel文件，兼容IE10及IE9版本以下浏览器处理方法
- JavaScript中,提取子字符串方法:Slice、Substring、Substr的比较
- 彻底解决IE8和IE9下ewebeditor上按钮无效的方法
- js中数组的使用方法
- 进行连续ajax调用的正确方法是什么？