[問題] Vue2 vuesortable 沒有運作

作者: liar2 (liar)   2017-04-23 20:32:33
有點不太懂 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
作者: zx4109 (阿仲)   2017-04-24 23:55:00
https://jsfiddle.net/dede89/sqssmhtz/會不會是 @{{group:'people'}} 少一對括號?
作者: dannypsnl (秦書)   2017-04-25 18:49:00
option那裡好像不能那樣寫應該要直接寫:option="variable"

Links booklink

Contact Us: admin [ a t ] ucptt.com