VueでjQueryのtableDnDを使う

2023.03.15

次の条件のもと作成されています。
・CompositionAPIを使用。

【ポイント】
onUpdatedを使用する。

index.html

<body id="body">
 <user-table></user-table>
</body>

index.js

'use strict';

Vue.createApp({
  setup( ){
  },
  components: {
    'user-table': Vue.defineAsyncComponent( () => window['vue3-sfc-loader']['loadModule']('./user-table.vue', window['Vue3']['loaderOption']() ) ),
  }
}).mount('#body');

※window[‘Vue3’][‘loaderOption’]()はnormalize.jsから参照

user-table.vue

<template>
  <table id="table1">
    <thead>
      <tr>
        <th>ID</th>
        <th>名前</th>
        <th>ユーザ名</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
     <tr
      v-for="(userObj, userIdx) in users"
      :key="userObj.id"
      :id="userObj.id"
      >
       <th class="move">{{ userObj.id }}</th>
       <td>{{ userObj.name }}</td>
       <td>{{ userObj.username }}</td>
       <td>{{ userObj.email }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script scoped>
import { onUpdated } from 'vue'
export default{
  setup( props ){
    const users = Vue.ref([]);
    
    const getUsers = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      users.value = data;
    };
    getUsers();

    onUpdated(() => {
      $('#table1').tableDnD({
        dragHandle	: 'th'
      });
    });

    return {
      users
    };
  }
}
</script>

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

ワイズリマインダー

VueでjQueryのtableDnDを使う

コメントを残すコメントをキャンセル

検索

最近のコメント

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク

VueでjQueryのtableDnDを使う

コメントを残す コメントをキャンセル

検索

最近のコメント

最近の投稿

タグ

フィード配信

アーカイブ

外部リンク

コメントを残すコメントをキャンセル