vuejs 和 jqueryui 与 browserify

Question

我使用 Laravel 和 Elixir。 我正在尝试将 vuejs 与 jquery UI 结合起来，但似乎我做错了什么。 这是我的 app.js：

global.jQuery = require('jquery');
var $ = global.jQuery;
window.$ = $;
// load everything from jquery-ui
require('jquery-ui');

var Vue = require('vue');

var App = require('./app.vue')

Vue.config.debug = true;

var vm = new Vue({
  el: 'body',
  components: { App },
});

还有这个 app.vue

<template>
  <div>
    <ul id="sortable" v-for="category in categories">
      <li>{{ category.name }}</li>
    </ul>
  </div>
</template>

<script>
  export default  {
    data: function () {
      return {
        categories: [
          { id: 1 , name: "one"},
          { id: 2 , name: "two"},
          { id: 3 , name: "three"}
        ]
      }
    },
    ready: function() {
      $( "#sortable" ).sortable();
      $( "#sortable" ).disableSelection();
    }
  }
</script>

我运行 gulp 并且编译正常，控制台没有错误，但是拖放不起作用。有什么想法吗？

Answer 1

好吧，这很愚蠢

v-for

转到<li> 而不是<ul>。 原来如此：

<template>
  <div>
    <ul id="sortable">
      <li v-for="category in categories">
         {{ category.name }}
      </li>
    </ul>
  </div>
</template>