Vue.js实现API返回用户数据按套餐类型过滤的问题咨询

问题核心原因 #

• 计算属性selectedUser返回值格式不统一：选中「全部」时返回接口完整响应对象（包含data/links/meta字段），选中套餐时直接返回过滤后的数组，和模板中遍历selectedUser.data的逻辑不匹配
• filter回调使用普通函数导致this指向丢失，无法正确获取this.selectedItems的值
• 方法命名冲突：数据字段users和接口请求方法同名，且方法语法存在书写错误
• 可选注意：你提供的调试信息里返回的套餐字段值为basic_planl（多了末尾l），和单选框的value="basic_plan"不匹配，会导致过滤无结果

修复方案 #

1. 调整模板遍历逻辑 #

统一直接遍历数组，不需要加.data：

<ul
  v-for="(user, index) in selectedUser"
  :key="index"
  class="watchers divide-y divide-gray-200"
>
<!-- 内部li代码保持不变 -->
</ul>

2. 修正script逻辑 #

<script>
import axios from 'axios'
export default {
  data() {
    return {
      users: [],
      selectedItems: "All"
    };
  },
  created() {
    this.getUsers();
  },
  methods: {
    // 重命名请求方法避免和data字段冲突，补全语法
    getUsers() {
      axios.get('api/users')
        .then(response => {
          this.users = response.data;
        })
    }
  },
  computed: {
    selectedUser: function() {
      // 先取到完整的用户列表数组
      const userList = this.users.data || []
      if(this.selectedItems === "All"){
        // 全部时直接返回用户数组，和过滤后的格式统一
        return userList
      }else{
        // 用箭头函数修复this指向问题
        return userList.filter(item => {
          return item.plan === this.selectedItems;
        });
      }
    }
  }
};
</script>

可选校验 #

如果接口返回的套餐值确实是basic_planl，请对应修改单选框的value：

<input type="radio" v-model="selectedItems" value="basic_planl" /> 基础套餐

内容的提问来源于stack exchange，提问作者David