[Vue] 解決使用Vue.Draggable排序表格無效問題

一、問題

在使用Sortable.js的Vue.js版本套件Vue.Draggable時
遇到排序div區塊沒問題，但是排序table就沒辦法拖曳排序的問題
程式碼如下：

<table>
    <draggable
        v-model="products"
        tag="tbody"
        element="tbody"
        handle=".handle"
    >
        <tr v-for="product in products" :key="product.id">
            <td>
                <i class="move-icon" style="font-size: 1.5rem"></i>
            </td>
            <td>
                {{ product.name }}
            </td>
        </tr>
    </draggable>
</table>

二、原因

因為這段程式碼寫在html模板的檔案中，而不是.vue檔
可以根據官方網站的說明修改
使用is特殊屬性：

<tbody is="draggable">

可以達到與下列相同的效果

<draggable tag="tbody">

三、修正後的程式碼

修正後的程式碼如下：

<table>
    <tbody
        is="draggable"
        v-model="products"
        element="tbody"
        handle=".handle"
    >
        <tr v-for="product in products" :key="product.id">
            <td>
                <i class="move-icon" style="font-size: 1.5rem"></i>
            </td>
            <td>
                {{ product.name }}
            </td>
        </tr>
    </tbody>
</table>