Vue 可拖动限制列表为 1 个元素

Question

在这里，我尝试实现从排名列表中克隆一个元素并将其放入两个列表(list1和list2(中的任何一个。一切似乎都在工作，我可以拖动和放置，但看起来绑定不起作用，因为两个列表不受影响，因为当我将元素拖到列表时观察者不会运行。此外，克隆功能不会将消息打印到控制台。我用这个例子作为参考。

<template>
<div>
<div>
<div>
<draggable
@change="handleChange"
:list="list1"
:group="{ name: 'fighter', pull: false, put: true }"
></draggable>
</div>
<div>
<draggable 
@change="handleChange"
:list="list2" 
:group="{ name: 'fighter', pull: false, put: true }
></draggable>
</div>
</div>
<div>
<div v-for="wc in rankings" :key="wc.wclass">
<Card>
<draggable :clone="clone" 
:group="{ name: 'fighter', pull: 'clone', put: false }"
>
<div class="cell" v-for="(fighter, idx) in wc.fighters" :key="fighter[0]">
<div class="ranking">
{{ idx + 1 }}
</div>
<div class="name">
{{ fighter[0] }}
</div>
</div>
</draggable>
</Card>
</div>
</div>
</div>
</template>
<script>
import axios from "axios";
import draggable from "vuedraggable";
export default {
components: {
draggable
},
data() {
return {
rankings: [],
list1: [],
list2: []
};
},
methods: {
getRankingLabel(label) {
if (!label || label == "NR") return 0;
if (label.split(" ").indexOf("increased") !== -1) return 1;
if (label.split(" ").indexOf("decreased") !== -1) return -1;
},
clone({ id }) {
console.log("cloning");
return {
id: id + "-clone",
name: id
};
},
handleChange(event) {
console.log(event);
}
},
watch: { 
// here I am keeping the length of both lists at 1  
list1: function(val) {
console.log(val); // nothing prints, as the watcher does not run
if (val.length > 1) {
this.fighter_one.pop();
}
},
list2: function(val) {
console.log(val); // nothing prints, as the watcher does not run
if (val.length > 1) {
this.fighter_two.pop();
}
}
},
created() {
axios
.get("http://localhost:3000")
.then(res => {
this.rankings = res.data;
})
.catch(err => {
console.log(err);
});
}
};
</script>
<style>
</style>

Answer 1

正如其他人在评论中指出的那样，您的问题可能与不包含:list道具或v-model的<draggable>标签有关。

话虽如此，您可以通过在@change事件中调用列表上的splice(1)方法将列表的大小限制为 1。

<draggable :list="list1" group="fighter" @change="list1.splice(1)">
{{ list1.length }}
</draggable>