Vueコンポーネントでのdata属性のバインド

Question

<table-draggable :users="{{ $users }}" ></table-draggable>


<script>
  jQuery(function($) {
//削除ボタンが押されたら削除用Ajaxを呼び出す
        $("table").on("click", ".del_btn", function() {
            var url = "{{ route('admin.user.destory','') }}/" + $(this).data("id");
            deleteRecord(url, this);
        });

});
</script>

<draggable :list='usersNew' :options="{animation:200,handle:'.my-handle'}" :element="'tbody'">
            <tr v-for="(user,index) in usersNew">
                <th>{{user.name}}</th>
                <th>{{user.email}}</th>
                <th>{{user.messages_count}}</th>
                <th><input type="button" class="del_btn btn-outline-secondary" value="削除" **data-id={{user.id}}**></th>
                <th><i class="fa fa-arrows my-handle"></i></th>
            </tr>
 </draggable>

<script>
    import draggable from 'vuedraggable'
    export default {
      components:{
        draggable
      },
      props:['users'],
      data:function(){
        return{
          usersNew:this.users,
        }
      },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

LaravelでJqueryでAjaxを使って削除ボタンを押したら該当したtr行を削除するという動作は動くのですが、今からvue.jsのdraggableというライブラリを使ってテーブル全体をコンポーネント化して対象の行をクリックしてソートできるというような動きにしたいです。その際に元々bladeにあった　thタグの中のinputタグのdata-id属性はどのようにvueの中でバインド？すればJqueryに再度読み込まれるのでしょうか、説明が悪くてすいませんがご教授いただければ幸いです。

Answer 1

jQueryとvueでは思想が違うので相性悪いですね
ajax的なことはvueならfetchで代替できるので、
可能であればvueにシフトした方がよいかもしれません

Comments

[a-212]

やはりそうですよね、色々調べてみましたがなかなか正解が無かったです。ありがとうございますfetchで試してみます。