vuejs 和 jqueryui 与 browserify

Posted 2023-02-22

【中文标题】vuejs 和 jqueryui 与 browserify

【英文标题】：vuejs and jqueryui with browserify

【发布时间】：2016-06-11 21:38:07

【问题描述】：

我使用 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 并且编译正常，控制台没有错误，但是拖放不起作用。有什么想法吗？

【参考方案1】：

好吧，这很愚蠢

v-for

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

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