我想使用 Vue.js 进行实时加载

Question

I want to retrieve my added new Quote without need of page reload. Now I have to refresh page, then I will be able to see data. I am using restdb.io as a database, so after making post request, how can I retrieve all data without page reload, could you please give some advice, maybe try something else

Emitted method

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

POST request

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 request

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

Answer 1

You must add a getQuotes method and use it to load the quotes in mounted and to fetch all the quotes after you add a new quote

  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);
        });
    }
  }