2016-02-28 78 views
1

我使用Laravel和Elixir。 我想结合vuejs与jQuery UI,但它似乎我做错了什么。 这是我的app.js:vuejs和jqueryui with browserify

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> 

我运行一饮而尽,它编译罚款,控制台没有错误,但拖放不工作。有任何想法吗?这是愚蠢的

v-for 

回答

0

好去<li><ul>。 所以它是:

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