動的html要素のVueバインド機能

Question

私はdatatableを使用しており、いくつかのチェックに基づいて異なるHTMLをレンダリングする必要があります。そのため、vueコードにはたくさんのjQueryイベントがあります。私は動的HTML要素にイベントを割り当てる方法があるのだろうかと思っていました。

内のデータテーブルの列は、これを実行しないでください

render:function(data, type, full, meta) { 
    let html = '<div class="catagory-checkbox">' 
     + '<label>' 
     + '<input id="' + data.LeadTrackingId + '" class="statusDetail" type="checkbox" />' 
     + '<span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span>' 
     + '</label>' 
     + '</div>'; 
    if(vm.isSuperAdmin) 
     return html; 

    return ""; 
} 

Answer 1

オブジェクト。あなたは文字列メソッドでhtmlを構築しています。これは方法ではなく、必要はありません。 Use template:, not render::-)あなたのコードは、上記のようになります

...

template : ` 
<div v-if"isSuperAdmin" class="catagory-checkbox">' 
    <label> 
     <input :id="LeadTrackingId" class="statusDetail" type="checkbox" />' 
     <span class="cr"><i class="cr-icon glyphicon glyphicon-ok"></i></span> 
    </label> 
</div> 
` 

あなたはそのようなIDをバインドすることができますが、あなたがする必要がありますか？ Good Vueコードはhtml要素にidを必要としません。