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