将vuejs ID传递给data-url

Question

我有v-for =“产品中的产品”
我如何将product.id传递给data-url？ 我试试：

<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">

或

data-url="{{route('image.settings.product.toggle',[$account,$album,$image,'product.id'])}}

不行。

        $(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})
                }
            },          
         });    

你能帮助我吗，谢谢。

我知道有两个方面，服务器端和客户端，但mybe有可能传递该ID吗？

Answer 1

是

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

工作？