在Laravel中使用Vue.js和Vue资源调用AJAX

npm install vue-resource

import Vue from 'vue';
import VueResource from 'vue-resource';

Vue.use(VueResource);

<template>
  <div>
    <button @click="fetchData">Fetch Data</button>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  methods: {
    fetchData() {
      this.$http.get('/api/items').then(response => {
        this.items = response.body;
      }, error => {
        console.error('Error fetching data:', error);
      });
    }
  }
};
</script>

// routes/api.php

Route::get('/items', [ItemController::class, 'index']);

// app/Http/Controllers/ItemController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ItemController extends Controller
{
    public function index()
    {
        $items = [
            ['id' => 1, 'name' => 'Item 1'],
            ['id' => 2, 'name' => 'Item 2'],
            // 更多的数据...
        ];

        return response()->json($items);
    }
}

composer require fruitcake/laravel-cors

protected $middleware = [
    // ...
    \Fruitcake\Cors\HandleCors::class,
];