你可以按照以下方式修改你的代码来实现点击加载每次加载4条数据：htmlCopy

<template>
  <div>
    <ul>
      <li v-for="(item, index) in displayedItems" :key="index">{{ item.name }}</li>
    </ul>
    <button @click="loadMore">加载更多</button>
    <Foot></Foot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      robot: [], // 初始化为空数组
      loadedItems: 0,
      itemsPerLoad: 4
    };
  },
  computed: {
    displayedItems() {
      return this.robot.slice(0, this.loadedItems);
    }
  },
  methods: {
    loadData() {
      this.$axios
        .get(this.$api_url.get_home_data)
        .then((res) => {
          if (res.data && res.data.code === 0) {
            this.loading = false;
            this.robot = res.data.data.robot;
          }
        })
        .catch((err) => {
          console.log(err.message);
          // this.$toast.fail(err.message);
        });
    },
    loadMore() {
      this.loadedItems += this.itemsPerLoad;
    }
  },
  mounted() {
    this.loadData(); // 初始化时加载数据
  }
};
</script>

在这个示例中，我们将 robot 数组初始化为空数组，并在 loadData 方法中获取数据并更新 robot 数组。displayedItems 计算属性用于动态计算当前要显示的数据项。loadMore 方法用于增加 loadedItems 的值，从而更新计算属性的结果，实现加载更多数据。

在 mounted 钩子中调用 loadData 方法来初始化加载数据。

请确保你已经正确配置了 Axios 库和 API 地址，并将代码中的 this.$api_url.get_home_data 替换为实际的 API 地址。

希望这对你有帮助！如果你还有其他问题，请随时提问。