javascript – Rubaxa-Sortable无法在’Element’上执行’matches’：’> *’不是有效的选择器
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – Rubaxa-Sortable无法在’Element’上执行’matches’：’> *’不是有效的选择器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含1806字，纯文字阅读大概需要3分钟。
内容图文
我正在使用vuejs和Rubaxa Sortable JavaScript库.使用< ul>< li>进行排序正常工作.但是对于表行,当我通过拖放重新排列时会出现此错误.
Sortable.min.js:3 Uncaught DOMException: Failed to execute 'matches' on 'Element': '>*' is not a valid selector.
我正在使用Vue.js v2.5.13和Rubaxa Sortable v1.7.0.
Vue.directive('sortable', {
inserted: function (el, binding) {
var sortable = new Sortable(el, binding.value || {});
}
});
new Vue({
el: '#app',
data () {
return {
items: [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5}]
}
},
methods: {
reorder ({oldIndex, newIndex}) {
const movedItem = this.items.splice(oldIndex, 1)[0]
this.items.splice(newIndex, 0, movedItem)
}
}
})<script src="https://vuejs.org/js/vue.min.js"></script>
<script src="https://cdn.rawgit.com/RubaXa/Sortable/c35043730c22ec173bac595346eb173851aece20/Sortable.min.js"></script>
<div id="app">
<h2>With List</h2>
<ul v-sortable="{onEnd: reorder}">
<li v-for="i in items" :key="i.id">{{ i.id }}</li>
</ul>
<hr/>
<h2>With Table</h2>
<table v-sortable="{onEnd: reorder}">
<tr v-for="i in items" :key="i.id">
<td>{{ i.id }}</td>
</tr>
</table>
{{ items }}
</div>解决方法:
<表>不能包含表行(< tr>).表的结构是这样的.
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
所以当我们写这样的html表时,
<table>
<tr>First Row</tr>
<tr>Second Row</tr>
</table>
浏览器会自动在< tbody>内插入所有行并呈现它这样.
<table>
<tbody>
<tr>First Row</tr>
<tr>Second Row</tr>
</tbody>
</table>
因此,表行不是< table>的直接子项,而是< tbody>的子项.因此,在< tbody>内生成表格行并将v-sortable添加到< tbody>.
<table>
<tbody v-sortable="{onEnd: reorder}"> <!-- v-sortable here -->
<tr v-for="i in items" :key="i.id">
<td>{{ i.id }}</td>
</tr>
</tbody>
</table>
而Sortable的缩小版本有一个bug,它们以某种方式摆脱了try-catch块,当它缩小时会导致它失败,除了< ul>< li>之外的任何东西.排序.因此,直到他们修复它,使用开发即未压缩的Sortable版本.
内容总结
以上是互联网集市为您收集整理的javascript – Rubaxa-Sortable无法在’Element’上执行’matches’：’> *’不是有效的选择器全部内容，希望文章能够帮你解决javascript – Rubaxa-Sortable无法在’Element’上执行’matches’：’> *’不是有效的选择器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。