时间戳

首页 > 解决方案 > Vue 可拖动限制列表到 1 个元素

vue.js - Vue 可拖动限制列表到 1 个元素

问题描述

在这里，我试图实现从排名列表中克隆一个元素并将其放入两个列表（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>

标签： vue.jsjquery-ui-draggablesortablejsvuedraggable

解决方案

正如其他人在评论中指出的那样，您的问题可能与<draggable>不包含:listprop 或v-model.

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

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

推荐阅读