Vue -тягиваемый лимит списка до 1 элемента - PullRequest
Новая
       54

Vue -тягиваемый лимит списка до 1 элемента

0 голосов
/ 01 февраля 2020

Здесь я пытаюсь реализовать клонирование элемента из списка ранжирования и поместить его в любой из двух списков (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>
...