Метод, вызываемый в ловушке created, выполняется только тогда, когда я запускаю npm serve и загружаю страницу, перезагрузка другой страницы не вызывает вызова метода. - PullRequest
Новая
       143

Метод, вызываемый в ловушке created, выполняется только тогда, когда я запускаю npm serve и загружаю страницу, перезагрузка другой страницы не вызывает вызова метода.

0 голосов
/ 19 июня 2020

Я пытаюсь создать приложение, в котором пользователь может перемещать элементы между несколькими категориями (списками) с помощью VueJS перетаскиваемого плагина. Состояние / положение этих элементов следует сохранять в FB RTDB по мере того, как пользователь перемещает элементы. На данный момент я пропустил сохранение части состояния и вручную вставил некоторые образцы данных в FB RTDB и пытаюсь просто прочитать начальное состояние. У меня есть правильно подключенный FB RTDB с плагином Vuefire, и я могу читать данные. Проблема в том, что состояние карт правильно читается, только когда я изменяю / редактирую функцию setupCards и перезагружаю экран браузера. Я могу перемещать предметы. Но когда я перезагружаю экран несколько раз, содержимое столбцов исчезает. Я вижу, что console.log('entered') никогда не достигается, когда я перезагружаю окно браузера. 

<template>
  <div class="career_funnel">
    <div class="container">
      <div class="row mt-5">
        <div class="col-sm-4">
          <div class="card text-center">
            <div class="card-header">Hate</div>
            <div class="card-body">
              <ul class="list-group drag">
                <draggable
                  class="dragArea"
                  group="career"
                >
                  <li
                    class="list-group-item"
                    v-for="(item) in cardsItems['hate']"
                    :key="item.id"
                  >
                    <label>{{ item.name }}</label>
                  </li>
                </draggable>
              </ul>
            </div>
          </div>
        </div>
        <div class="col-sm-4">
          <div class="card text-center">
            <div class="card-header">Love</div>
            <div class="card-body">
              <ul class="list-group drag">
                <draggable
                  class="dragArea"
                  group="career"
                >
                  <li
                    class="list-group-item"
                    v-for="(item) in cardsItems['love']"
                    :key="item.id"
                  >
                    <label>{{ item.name }}</label>
                  </li>
                </draggable>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import db from '../firebase';
import draggable from 'vuedraggable';

export default {
  name: 'CareerFunnel',
  components: {
    draggable,
  },
  data: function() {
    return {
      cards: [],
      cardsItems: {
        hate: [],
        love: [],
      },
    };
  },
  firebase: {
    cards: db.ref('cards'),
  },
  methods: {
    setupCards: function() {
      this.cards.forEach((element) => {
        console.log('entered');
        this.cardsItems[element.category].push(element);
      });
    },
  },
  created() {
    this.setupCards();
  },
};
</script>

Это образец данных, сохраненный в FB RTDB 

{
  "yxcyvxcvxycvcxy" : {
    "category" : "love",
    "id" : "4",
    "name" : "Flex hours"
  },
  "dfhgfdhfhgfdh" : {
    "category" : "love",
    "id" : "3",
    "name" : "Boss"
  },
  "dfgdsgdfsgfdg" : {
    "category" : "hate",
    "id" : 2,
    "name" : "Sales Bonus"
  },
  "xycvxycvcxyvxy" : {
    "category" : "hate",
    "id" : 1,
    "name" : "Corporate culture"
  }
}

Я не могу предоставить рабочий фрагмент, поскольку я не могу поделиться своими учетными данными FB.

...