使用laravel更新vue中的数据，而无需刷新页面或重叠div

// routes/api.php
Route::apiResource('items', ItemController::class);

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    this.fetchItems();
    setInterval(this.fetchItems, 5000); // 每5秒轮询一次
  },
  methods: {
    fetchItems() {
      axios.get('/api/items').then(response => {
        this.items = response.data;
      });
    }
  }
};
</script>

<template>
  <div>
    <ul>
      <li v-for="item in items" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
import io from 'socket.io-client';

export default {
  data() {
    return {
      items: []
    };
  },
  mounted() {
    this.socket = io('http://your-server-address');
    this.socket.on('itemUpdated', (data) => {
      this.items = data;
    });
  },
  beforeDestroy() {
    this.socket.disconnect();
  }
};
</script>