CODEWITHSUNDEEP
javascriptphphtmllaravelvue.js
Arturs
Arturs

Reputation: 402

Pass vuejs ID to a data-url

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 ?

Upvotes: 0

Views: 1142

Answers (1)

Happyriri
Happyriri

Reputation: 4443

Is 

:data-url="'{{env('APP_URL')}}/accounts/{{ $account->id }} /albums/{{ $album->id }}
           /images/{{ $image }}/settings/' + product.id + '/toggle'">

working ?

Upvotes: 3

Related Questions