Question

我正在尝试使用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
   },
 });

Answer 1

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

如果组件是v-for的子组件，则它可以正常工作。这是updated fiddle和一个有效的代码片段：

＆＃13;

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();
  }
});

＆＃13;

#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
}

＆＃13;

<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>

＆＃13;

注意：该代码段已更新为使用Vue 2.0语法。

Vuejs与JQuery UI可排序问题

1 个答案: