将 vuejs ID 传递给 data-url

Posted 2023-02-22

【中文标题】将 vuejs ID 传递给 data-url

【英文标题】：Pass vuejs ID to a data-url

【发布时间】：2017-09-09 05:18:23

【问题描述】：

我有 v-for="product in products" 我如何将 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 吗？

【参考方案1】：

是

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

工作？

【讨论】：

谢谢，是的，我在 google 上找到了这个解决方案，谢谢。