异步加载中使用 watch

异步数据的加载 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。

 

以下实例我们使用 axios 库，后面会具体介绍。

 

实例

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->

<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->

<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>

<script>

  const watchExampleVM = Vue.createApp({

    data() {

      return {

        question: '',

        answer: '每个问题结尾需要输入 ? 号。'

      }

    },

    watch: {

      // 每当问题改变时，此功能将运行，以 ? 号结尾

      question(newQuestion, oldQuestion) {

        if (newQuestion.indexOf('?') > -1) {

          this.getAnswer()

        }

      }

    },

    methods: {

      getAnswer() {

        this.answer = '加载中...'

        axios

          .get('https://yesno.wtf/api')

          .then(response => {

            this.answer = response.data.answer

          })

          .catch(error => {

            this.answer = '错误! 无法访问 API。 ' + error

          })

      }

    }

  }).mount('#watch-example')

</script>