I have v-for="product in products"
How i can pass product.id to a data-url?
I try:
<li class="list-group-item" v-for="product in products">
@{{ product.label }}
<input
type="checkbox" :id="product.id" :value="product.id" v-model="product.checked"
class="toggle-product pull-right"
data-url="{{env('APP_URL')}}/accounts/{{ $account->id }} /albums/{{ $album->id }}/images/{{ $image }}/settings/@{{ product.id }}/toggle">
or
data-url="{{route('image.settings.product.toggle',[$account,$album,$image,'product.id'])}}
not work.
$(function () {
// enable/disable products on sidebar
$(".toggle-product").on('click', function () {
var checked = $(this).is(':checked');
var $status = $(this).parents(".list-group-item");
$status.addClass('list-group-item-warning');
$.post($(this).data('url'), {
'enabled': checked ? 1 : 0,
'_token': "{{csrf_token()}}"
}, function (response) {
$status.removeClass('list-group-item-warning');
}.bind(this))
});
});
new Vue({
el: '#products',
data: {
products: [
@foreach($validProducts as $p)
{ label: '{{$p->getTranslatedName()}}', id: '{{$p->id}}', @if(!isset($restrictedProductIds[$p->id])) checked: true @endif},
@endforeach
]
},
computed: {
checked: function (){
return this.products.filter(function (l) {
return l.checked
}).map(function (l){
return l})
}
},
}); Can you help me, thanks.
I know there are two side, server side and client side, but mybe have possible to pass that id ?
