We Keep Coding

Vue js v-bind to function not working?

Trying to generate a dynamic URL for a hyper-link, so that users can navigate to a specific customer page by 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
vm.generateCustomerUrl is not a function Stack trace:
How can I generate a URL dynamically for Vue.js 2.0 without using interpolation (which is disabled).

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>
The solution was the pass the method as a property to the list component
e.g.
<list generateUrl=this.generateUrl></list>

Get value from defined <td> (ASP.NET MVC)

I have View where I show some data via table
Here is code
#foreach (var item in Model)
{
<tr >
<td class="point">
#(rowNo += 1)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.Email)
#Html.Hidden("clientEmail", item.Email)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.UserName)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.Position)
</td>
<td style="text-align: center; font-size: 18px;">
#Html.DisplayFor(modelItem => item.Company.CompanyName)
</td>
<td style="text-align: end;">
<button type="submit" id="send" class="sendinviteclass" style="color: white">Отправить приглашение</button>
I have button with id="send" and I need to get Email by it via JS.
My trouble in that - I can have for example 5 rows in table and so I can have 5 buttons.
How I can get value from email what I need via JS?
UPDATE
Here is page source code
<div style="padding-left: 70px; padding-bottom: 20px;">
<p>
<a href="/">
<img src="/images/logo.png" alt="image" height="100px" width="110px">
</a>
</p>
</div>
<div class="navbar">
<div class="container" style="position: relative">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!--<a class="navbar-brand" href="/">Видео Интрервью</a>-->
</div>
<div class="navbar-collapse collapse center-block">
<ul class="nav navbar-nav">
<li>Компании</li>
<li>Подтвержденные</li>
<li>Приглашения</li>
<li>Создать интервью</li>
<li>Просмотр</li>
<li>Входящие</li>
<li>Архив</li>
</ul>
<form action="/Account/LogOff" class="navbar-right" id="logoutForm" method="post"><input name="__RequestVerificationToken" type="hidden" value="6_mqaCf427P4eDczunVjASai_ZRrITyXFFtIwygRva6gR8Mr5nNZJqU8IBwTbt_HYx8bjjz81WHzLkbljebv6iALVFrIFh7N-KDi3rc6nJ_o8m3fYOsciskGTOX6stGRPop_D7qr240jQ2disCDSkg2" /> <ul class="nav navbar-nav navbar-right">
<li>
</li>
<li>Выйти</li>
</ul>
</form>
</div>
</div>
</div>
<div class="container body-content">
<form action="/Clients/SendEmail" method="post"><form action="/Clients" method="post"> <table class="table">
<tr style="background: #d1d3d4">
<th></th>
<th style="font-size: 20px; text-align: center;">
Email
</th >
<th style="font-size: 20px; text-align: center;">
Клиент
</th>
<th style="font-size: 20px; text-align: center;">
Должность
</th>
<th style="font-size: 20px; text-align: center;">
Компания
</th>
<th></th>
</tr>
<tr>
<td style="height: 40px; width: 40px; background: red;">
<a href='/Clients/Create'>
<img style="object-fit: cover;" src='/Images/plus.png'/>
</a>
</td>
</tr>
<tr >
<td class="point">
1
</td>
<td class="email_text" style="text-align: center; font-size: 18px;">
nemesises#live.com
<input id="clientEmail" name="clientEmail" type="hidden" value="nemesises#live.com" />
</td>
<td style="text-align: center; font-size: 18px;">
Сухомлин Евгений
</td>
<td style="text-align: center; font-size: 18px;">
C# Developer
</td>
<td style="text-align: center; font-size: 18px;">
Фокстрот
</td>
<td style="text-align: end;">
<button type="button" onclick="sender()" data-email="nemesises#live.com" id="email" class="sendinviteclass" style="color: white">Отправить приглашение</button>
<a href='/Clients/Edit/2033'>
<img src='/Images/Edit.png'/>
</a>
<!-- <a class="editclass" href="/Clients/Edit/2033">Редактировать</a>-->
<a href='/Clients/Delete/2033'>
<img src='/Images/Delete.png'/>
</a>
</td>
</tr>
</table>
</form><script>
function sender(element) {
$(element).data('email');
alert(email);
}
</script>

Add data- prop to your button like:
<button type="submit" id="send" onclick="sender(this)" data-email="#item.email" class="sendinviteclass" style="color: white">Отправить приглашение</button>
And in JS:
var email = $(this).data('email')
Assuming this is your button.

Vue.js component within inline component

I've got this code in Vue.js 2.0:
<forums inline-template v-cloak>
<div v-if="!loading">
<div v-if="!validation.isEmpty(forums)">
<table class="table table-hover">
<thead>
<tr>
<th class="col-md-4 table__title">
Topic
</th>
<th class="col-md-2 table__title">
Bericht
</th>
<th class="col-md-3 hidden-xs hidden-sm table__title">
Laatste
</th>
</tr>
</thead>
<tbody>
<tr #click="link(forum)" v-for="(forum, index) in forums">
<td class="col-md-4">
#{{ forum.name }}
<div class="hidden-xs hidden-sm">
<p>
<i class="table__subtitle">#{{ forum.description }}</i>
</p>
</div>
</td>
<td class="col-md-2">
#{{ forum.messages_count }}
</td>
<td class="col-md-3 hidden-xs hidden-sm">
#{{ latestMessageAuthor(forum) }}
</td>
#if(Auth::user()->isAdmin())
<td class="col-md-2 hidden-xs hidden-sm">
<i class="material-icons" #click.stop="destroy(forum)">

</i>
<a :href="'/bewerk/forum/' + forum.slug">
<i class="material-icons"></i>
</a>
<i class="material-icons" #click.stop="increment(forum, index)">

</i>
<i class="material-icons" #click.stop="decrement(forum, index)">

</i>
</td>
#endif
<subscription :context="forum.subscriptions_count" :service="service"></subscription>
</tr>
</tbody>
</table>
</div>
<div v-else>
<p class="text-center">Geen forums.</p>
</div>
</div>
<div class="center" v-else>
<loader :loading="loading"></loader>
</div>
</forums>
The problem is that I receive this error in my console:
[Vue warn]: Property or method "forum" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.
(found in <Forums> at /Users/Code/forumv2/resources/assets/js/components/forum/forums.vue)
I pass the forum.subscriptions_count to my subscription component. Here it goes wrong. Forum is undefined?
Why is that because it's in a v-for="(forum, index)" loop! Does this not work with inline templates?

Using Jquery.GetJSON to display numbers from JSON file in HTML/JS, with Wordpress?

I have seen similar questions but no answer has quite worked for me yet.
I have JSON code at this address.
I am trying to display the "value_sell" and "value_buy:" objects from "official" and "blue". In Wordpress I have placed the following code in the custom Javascript box:
jQuery(function() {
jQuery.getJSON( “http://api.bluelytics.com.ar/v2/latest?callback=?”,function( data ) {
jQuery(‘#blue_bid’).text(data.blue.value_buy.toFixed(2));
jQuery(‘#blue_ask’).text(data.blue.value_sell.toFixed(2));
jQuery(‘#official_bid’).text(data.oficial.value_buy.toFixed(2));
jQuery(‘#official_ask’).text(data.oficial.value_sell.toFixed(2));
});
});'
The following is the HTML table using variables to display values, but it does not display anything:
<aside class="widget wbluedollar">
<table width=200 cellpadding=3 bordercolor=white border=none>
<tr width=200>
<td style="background: linear-gradient(blue, #0000bb);color:white;" width="100">
<div style="color:#FFFFFF; font-size:.8em;">Dollar Blue</div>
</td>
<td style="background: linear-gradient(#00bb00, green);color:white;" width="100">
<div style="color:#FFFFFF; font-size:.8em;">Dollar Official</div>
<tr>
<td>
<div style="color:#0000bb; font-size:.8em;">BUY: <span id="blue_bid">
<br>SELL: <span id="blue_ask">
</div></td>
<td>
<div style="color:#00bb00; font-size:.8em;">BUY: <span id="official_bid>
<br>SELL: <span id="official_ask"></div></td>
<tr>
<td>
<div style="color:grey; font-size:.7em;">Powered by
<a href=http://bluelytics.com.ar/>Bluelytics</a>
</div></td>
</table>
Any suggestions on where the problem is?
Thanks!

Use proper quotes,properly close the dom elements
<tr width=200>
<td style="background: linear-gradient(blue, #0000bb);color:white;" width="100">
<div style="color:#FFFFFF; font-size:.8em;">Dollar Blue</div>
</td>
<td style="background: linear-gradient(#00bb00, green);color:white;"
width="100">
<div style="color:#FFFFFF; font-size:.8em;">Dollar Official</div>
<tr>
<td>
<div style="color:#0000bb; font-size:.8em;">BUY: <span id="blue_bid"></span>
<br>SELL: <span id="blue_ask"></span>
</div></td>
<td>
<div style="color:#00bb00; font-size:.8em;">BUY: <span id="official_bid"></span>
<br>SELL: <span id="official_ask"></div></td>
<tr>
<td>
<div style="color:grey; font-size:.7em;">Powered by
<a href=http://bluelytics.com.ar/>Bluelytics</a>
</div></td>
</table>
js:
jQuery(function() {
jQuery.getJSON( "http://api.bluelytics.com.ar/v2/latest?callback=?",function( data ) {
jQuery("#blue_bid").text(data.blue.value_buy.toFixed(2));
jQuery("#blue_ask").text(data.blue.value_sell.toFixed(2));
jQuery("#official_bid").text(data.oficial.value_buy.toFixed(2));
jQuery("#official_ask").text(data.oficial.value_sell.toFixed(2));
});
});
Jsfiddle: http://jsfiddle.net/vr9e619k/

Jquery, delete dynamically added content

I'm trying to delete some div block which contains a bunch of content, I have a div bloc inside it I can add some content dynamically using a button also existing withing the same div, without adding content deleting the block is working fine, however when I add some content inside this bloc its not totally deleted, the dynamically added content is not deleted.
Here's my code :
<div class="collection form_lignefacturefournisseur" >
<div class="portlet box green">
<div class="portlet-title">
<div class="caption"><i class="fa fa-globe"></i>Produit de Bon de Livraison N°<span id="spanidbl{{ loop.index }}">{{ loop.index }}</span></div>
<div class="tools">
</div>
</div>
<div class="portlet-body">
<div class="form-group">
<label class="col-md-1 control-label">N° BL</label>
<div class="col-md-2">
{{form_widget(ligneffm.idbl,{ 'attr': {'class': 'form-control'} }) }}
<span class="help-block">{{form_widget(ligneffm.idbl)}}</span>
</div>
</div>
<table class="table table-scrollable table-striped table-hover table-bordered table_form_lignefacturefournisseur{{ loop.index }}" id="lignedevistable{{ loop.index }}" >
<thead>
<tr>
<th style="width: 188px;">Produit</th>
<th>Quntité</th>
<th>Prix HT</th>
<th>Sous Total HT</th>
<th>Action</th>
</tr>
</thead>
<tbody>
{% for ligneff in ligneffm.ligneff %}
<tr class="ligneproduit{{loop.index}}">
<td>{{ form_widget(ligneff.idarticle,{ 'attr': {'class': 'form-control'} }) }}</td>
<td style="display:none;">{{ form_widget(ligneff.libelleligneff,{ 'attr': {'class': 'form-control'} }) }}</td>
<td>{{ form_widget(ligneff.qtLignefacturefournisseur) }}</td>
<td>{{ form_widget(ligneff.prixLignefacturefournisseur) }}</td>
<td style="display:none;">{{ form_widget(ligneff.listeprixarticle) }}</td>
<td class="inputdesible">{{ form_widget(ligneff.totalLignefacturefournisseur) }}</td>
<td> <a class="remove btn red" title="Remove" idx="{{loop.index}}"><i class="fa fa-eraser"></i></a></td>
</tr>
{% endfor %}
<tr id="lignefacturefournisseurtr" style="display:none" >
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="clearBoth"></div>
<input id="form_lignefacturefournisseur_btn__namear__" class="form_lignefacturefournisseur_btn btn green fa fa-plus" type="button" value="Ajouter" /><i style="display:none" id="countTiwg">{{loop.length}}</i>
</div>
The deleted part of the code is :
<div class="portlet box green">
<div class="portlet-title">
<div class="caption"><i class="fa fa-globe"></i>Produit de Bon de Livraison N°<span id="spanidbl{{ loop.index }}">{{ loop.index }}</span></div>
<div class="tools">
</div>
</div>
And the other part that contains the added content is not deleted
The jQuery code is as following:
$('.tools a.remove').live('click',function(){
$(this).parent().parent().siblings('.portlet-body').remove();
$(this).closest('div [class*="form_lignefacturefournisseur"]').remove();
blCount--;
});
Note : Ive tried several methods of invocking the click event, the same thing/result.
Any idea , thanks in advance!

Thanks every one for trying to help me, what I found, is that the button I was working on, has some work in the background, I'm using a template that help me with functionnalities, what Ive done is that I let it and created another button, work with it :
$(".supprimer_bl").live("click", function() {
var idBl = $(this).parent().parent().parent().get(0);
console.log('the class of the element is : ', idBl);
idBl.remove();
// $('.'+classCont).remove();
// $(this).closest('div [class*="form_lignefacturefournisseur"]').contents().remove();
blCount--;
});