前端Vue页面如何获取后端传递的筛选后的列表数据并展示？

在 Vue 页面中，可以通过以下方式获取后端传递的筛选后的列表数据并展示：

一、发送请求获取数据

1. 使用axios或fetch等库发送请求
   • 如果项目中没有安装axios，可以通过以下命令安装：npm install axios。
   • 在 Vue 组件中，可以使用axios发送请求获取后端数据。例如：

   import axios from 'axios';
   
   export default {
     data() {
       return {
         filteredData: []
       };
     },
     methods: {
       async fetchFilteredData() {
         try {
           const response = await axios.get('/api/filtered-data-endpoint');
           this.filteredData = response.data;
         } catch (error) {
           console.error('Error fetching filtered data:', error);
         }
       }
     },
     created() {
       this.fetchFilteredData();
     }
   };
   

   • 上述代码中，在组件创建时调用fetchFilteredData方法，该方法使用axios发送 GET 请求到后端的/api/filtered-data-endpoint接口，获取筛选后的列表数据，并将数据存储在filteredData数组中。

二、展示数据

1. 使用v-for指令遍历数据并展示
   • 在 Vue 的模板部分，可以使用v-for指令遍历filteredData数组，并展示每个数据项的内容。例如：

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

   • 在上述代码中，使用v-for指令遍历filteredData数组，为每个数据项创建一个<li>元素，并展示数据项的name属性。

通过以上步骤，Vue 页面可以获取后端传递的筛选后的列表数据并进行展示。可以根据实际情况调整请求的接口地址和数据展示的方式。