Я хочу сделать загрузку в реальном времени, используя Vue. js - PullRequest
Новая
       18

Я хочу сделать загрузку в реальном времени, используя Vue. js

1 голос
/ 30 апреля 2020

Я хочу получить добавленную цитату без перезагрузки страницы. Теперь мне нужно обновить страницу sh, тогда я смогу увидеть данные. Я использую restdb.io в качестве базы данных, поэтому после отправки пост-запроса, как я могу получить все данные без перезагрузки страницы, не могли бы вы дать какой-нибудь совет, возможно, попробовать что-то еще

Метод испускаемых данных 

methods: {
     addQuote(e) {
        e.preventDefault();
        if (this.text.length === 0) {
            alert("Поле пустое. Пожалуйста введите цитату");
            return;
        }
        const newQuote = this.text;
        this.$emit("add-quote", newQuote);
        this.text = "";
    }
}

POST-запрос 

addQuote(quote) {
    if (this.quotes.length === 10) {
        alert("Для добавления новых цитат удалите одну из добавленных");
        return;
    }
    axios
        .post(
            "https://beeline-3fee.restdb.io/rest/db?apikey=<api_key>",
            { text: quote }
        )
        .then(response => response.data)
        .then(quote => {
            console.log("Success:", quote);
        })
        .catch(error => {
            console.error("Error:", error);
        });
    }
}

GET-запрос 

mounted() {
    axios
    .get(
        "https://beeline-3fee.restdb.io/rest/db?apikey=<api_key>"
    )
    .then(response => (this.quotes = response.data))
    .catch(err => console.log(err));
}

1 Ответ

0 голосов
/ 30 апреля 2020

Вы должны добавить метод getQuotes и использовать его для загрузки кавычек в mounted и для извлечения всех кавычек после вы добавляете новую цитату 

  mounted() {
    this.getQuotes();
  },
  methods: {
    getQuotes() {
      axios.get("https://beeline-3fee.restdb.io/rest/db?apikey=5eaaf516161b39295cdee783")
        .then((response) => (this.quotes = response.data))
        .catch((err) => console.log(err));
    },
    addQuote(quote) {
      if (this.quotes.length === 10) {
        alert("Для добавления новых цитат удалите одну из добавленных");
        return;
      }
      axios
        .post("https://beeline-3fee.restdb.io/rest/db?apikey=5eaaf516161b39295cdee783",
          {
            text: quote,
          }
        )
        .then((quote) => {
          console.log("Success:", quote);

          // this will fetch the quotes again
          this.getQuotes();
        })
        .catch((error) => {
          console.error("Error:", error);
        });
    }
  }
...