Vue.js 中的 Ajax 处理：vue-resource 库的深度解析

<template>
  <div>
    <input type="text" v-model="keyword">
    <button @click="searchBooks">搜索图书</button>
    <ul>
      <li v-for="book in books" :key="book.id">{{ book.name }}</li>
    </ul>
  </div>
</template>
 
<script>
import Vue from 'vue';
import VueResource from 'vue-resource';
 
Vue.use(VueResource);
 
export default {
  data() {
    return {
      keyword: '',
      books: []
    };
  },
  methods: {
    searchBooks() {
      // 使用 vue-resource 发送请求
      this.$http.get('https://api.example.com/search', { params: { keyword: this.keyword } })
        .then(response => {
          // 请求成功处理
          this.books = response.body;
        })
        .catch(error => {
          // 请求失败处理
          console.error('请求失败:', error);
        });
    }
  }
};
</script>

这个简单的 Vue 组件使用了 vue-resource 插件来处理 AJAX 请求。用户在输入框输入关键词后，点击按钮进行搜索，组件将向 'https://api.example.com/search' 发送 GET 请求，并将返回的图书数据存储在组件的 books 数组中，然后通过列表显示出来。如果请求失败，将在控制台输出错误信息。