带有 JQuery UI 可排序问题的 Vuejs答案

【问题标题】：Vuejs with JQuery UI sortable issue带有 JQuery UI 可排序问题的 Vuejs
【发布时间】：2016-06-02 19:23:22
【问题描述】：

我正在尝试使用 vuejs 和 jquery ui 创建一个带有删除功能的可排序列表我有以下结果

请检查以下 jsfiddle

删除功能正在工作，但是一旦您开始对删除进行排序，则删除剂量不再适用于已排序的项目及其下方的项目。

如果我像下面的小提琴那样将两个组件组合在一起，它可以正常工作，但我不希望这样，因为原始应用程序更复杂，组件更复杂，我想将它分开。

TLDR：这是代码

var listItem = Vue.extend({
   template: '<li class="ui-state-default">{{item.title}} {{item.id}} <span v-on:click="remove(item)"> x </span></li>',
   props: {
     item: Object
   },
   methods: {
     remove: function(item) {
       this.$dispatch('remove-item', item)
     }
   }
 });
 var sortableList = Vue.extend({
   template: '<ul id="sortable"><list-item v-for="item in list" :item="item" class="ui-state-default"></list-item></ul>',
   data: function() {
     return {
       list: [{ id: 1, title: "Item"},
                    { id: 2, title: "Item"},
              { id: 3, title: "Item"}]
     }
   },

   events: {
     "remove-item": function(item) {
       var index = this.list.indexOf(item)
       this.list.splice(index, 1);
     }
   },
   components: {
     listItem
   },
 });

 new Vue({
   el: 'body',
   ready: function() {
     $("#sortable").sortable();
     $("#sortable").disableSelection();
   },
   components: {
     sortableList
   },
 });

【问题讨论】：

标签： jquery jquery-ui vue.js

【解决方案1】：

看起来 v-for 和 sortable 不能都直接在 vue 组件上。我的猜测是当 Vue 和 JQuery 都尝试管理 li 元素时会发生冲突。

如果组件是v-for 的子组件，它可以工作。这是updated fiddle，还有一个工作代码sn-p：

Vue.component('list-item', {
  template: '#list-item',
  props: {
    item: Object
  },
  methods: {
    remove: function (item) {
      this.$emit('remove-item', item)
    }
  }
});

Vue.component('sortable-list', {
  template: '#sortable-list',
  data: function () {
    return {
      list: [{
        id: 1,
        title: "Item"
      }, {
        id: 2,
        title: "Item"
      }, {
        id: 3,
        title: "Item"
      }]
    }
  },
  methods: {
    "removeItem": function (item) {
      var index = this.list.indexOf(item)
      this.list.splice(index, 1);
    }
  }
});

new Vue({
  el: '#app',
  mounted: function () {
    $("#sortable").sortable();
    $("#sortable").disableSelection();
  }
});

#sortable {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 60%;
}

#sortable li {
  font-family: Arial;
  margin: 0 3px 3px 3px;
  padding: 0.4em;
  padding-left: 1.5em;
  font-size: 1.4em;
  height: 18px;
}

#sortable li span {
  float: right;
  cursor: pointer
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>

<div id="app">
  <sortable-list></sortable-list>
</div>

<template id="list-item">
  <div class="ui-state-default">
    {{item.title}} {{item.id}} 
    <span v-on:click="remove(item)"> x </span>
  </div>
</template>

<template id="sortable-list">
  <ul id="sortable">
    <li v-for="item in list">
      <list-item :item="item" 
                 class="ui-state-default"
                 @remove-item="removeItem">
      </list-item>
    </li>
  </ul>
</template>

注意：sn-p 已更新为使用 Vue 2.0 语法。

【讨论】：