Property "quote" was accessed during render but is not defined on instance. (Vue.js)-CodePudding

trying to fetch from the kanye api and I keep getting this error "Property "quote" was accessed during render but is not defined on instance.

type here

" here's my code

<template>
  <div>
    <i>"{{quote}}"</i>
    <p>Kanye West</p>
    
  </div>
</template>

<script>
import axios from 'axios'
import { ref } from 'vue'
export default {

    setup() {

        const quote = ref('')

        const getQuote = async () => {
            const response = await axios.get('https://api.kanye.rest/')
            quote.value = response.data.quote
        }
        getQuote()

CodePudding user response：

use `{{quote.quote}}` instead.

CodePudding user response：

You should just return quote.

<template>
  <i>"{{ quote }}"</i>
  <p>Kanye West</p>
</template>

<script>
import axios from "axios";
import { ref } from "vue";
export default {
  setup() {
    const quote = ref("");

    const getQuote = async () => {
      const response = await axios.get("https://api.kanye.rest/");
      quote.value = response.data.quote;
    };

    getQuote();

    return {
      quote
    }
  },
};
</script>