作者liar2 (liar)
看板Ajax
标题[问题] Vue2 vuesortable 没有运作
时间Sun Apr 23 20:32:33 2017
有点不太懂 Vue 怎麽引入档案的
我今天只是想要用一个 sortable 的套件
官网如下:
https://github.com/SortableJS/Vue.Draggable
根据官网下载了两个 js 档
并用 <script> tag 将两个档引入
不太明白官方说的 require or import 要怎麽用
先在 head 引入这三个必需的档案後
<script src="{{ asset('/js/app.js') }}"></script> \\ laravel 自带的 Vue2
<script src="{{ asset('/js/Sortable.min.js') }}"></script>\\ vuedraggable必要
<script src="{{ asset('/js/vuedraggable.js') }}"></script> \\ 本次主角
照范例这样写
html 部分: ( 因为用 laravel 的 blade 所以 {{ 前面要加 @
<draggable v-model="myArray" :options="@{group:'people'}" @start="drag=true"
@end="drag=false">
<div v-for="element in myArray">@{{element.name}}</div>
</draggable>
js 部分:
<script>
(function(){
var vm = new Vue({
el: "#main",
data: {
myArray:[{name:"AAA"},
{name:"BBB"},
{name:"CCC"} ]
}
});
})();
</script>
画面上有出现 AAA BBB CCC
但却不能拖曳, 想问我有可能是哪个步骤搞错吗?
谢谢 QQ
--
※ 发信站: 批踢踢实业坊(ptt.cc), 来自: 118.165.65.88
※ 文章网址: https://webptt.com/cn.aspx?n=bbs/Ajax/M.1492950758.A.B10.html
2F：→ zx4109: 会不会是 @{{group:'people'}} 少一对括号？ 04/25 00:11
3F：→ dannypsnl: option那里好像不能那样写 04/25 18:49
4F：→ dannypsnl: 应该要直接写 04/25 18:49
5F：→ dannypsnl: :option="variable" 04/25 18:49