Vue 接口结果赋值给数组

Vue.js中，当从API接口获取数据并希望将其赋值给数组时，通常会在`data`选项或者计算属性(`computed`)中定义一个空数组，然后在`created()`、`mounted()`生命周期钩子或`watch`监听器中处理接口请求。

例如：

// 在data或 computed 中定义初始数组
data() {
  return {
    items: [], // 初始为空数组
  };
}

// 或者

computed: {
  items() {
    return [];
  },
},

接下来，在`methods`或响应式函数中发送请求：

methods: {
  fetchData() {
    axios.get('api_url') // 替换成实际的API URL
      .then(response => {
        this.items = response.data; // 将接口返回的数据赋值给 items 数组
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }
}

或者在`watch`监听数据变化时获取：

watch: {
  someDependency: {
    handler(newData) {
      this.items = newData; // 如果依赖的数据更新了，会自动更新数组
    },
    immediate: true, // 立即初始化，假设someDependency已经设置了接口数据
  },
},

这样，当你调用`fetchData()`或依赖改变时，`items`数组就会填充接口返回的项。记得要在模板中通过`v-for`遍历`items`来显示内容。