Vue.js中键名带双引号的数组排序及格式转换问询

别担心，你完全不需要把接口返回的数组转换成示例里的格式！其实你误解了一个关键点：从接口拿到的[{"name":"1", "val":"a"}]这种JSON格式的数据，在JavaScript中解析后，和示例里的[{name:'1', val:'a'}]是完全等价的。

JSON格式要求对象键名必须用双引号，但当它被解析成JavaScript对象后，这些键名和你直接写的不带引号/带单引号的键名没有任何区别——你依然可以通过item.name或者item.val来访问属性。

直接适配接口数据的完整代码 #

你只需要稍微调整代码，把初始的testData设为空数组，然后在接口请求成功后赋值即可，过滤和排序的逻辑完全不需要修改：

<template>
  <div id="app">
    <br /><br />
    <div>
      <input type="text" v-model="filterValue" placeholder="Filter">
      <button @click="invertSort()">Sort asc/desc</button>
    </div>
    <table class="table table-striped">
      <thead>
        <tr>
          <td>Name</td>
          <td>Value</td>
        </tr>
      </thead>
      <tbody>
        <!-- 添加:key符合Vue最佳实践 -->
        <tr v-for="(data, index) in filteredAndSortedData" :key="index">
          <td>{{data.name}}</td>
          <td>{{data.val}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      testData: [], // 初始设为空数组，等待接口返回数据
      error: "",
      errorFlag: false,
      filterValue: "",
      sortAsc: true
    };
  },
  mounted() {
    // 页面加载后调用接口获取数据
    this.getDataFromApi();
  },
  methods: {
    async getDataFromApi() {
      try {
        // 替换成你的实际接口请求逻辑，比如用axios/fetch
        // const response = await axios.get('/your-api-endpoint');
        // 模拟接口返回的JSON格式数据
        const mockResponse = {
          data: [{"name":"1", "val":"a"}, {"name":"2", "val":"b"}, {"name":"3", "val":"c"}, {"name":"4", "val":"d"}]
        };
        this.testData = mockResponse.data;
      } catch (err) {
        this.error = err.message;
        this.errorFlag = true;
      }
    },
    invertSort() {
      this.sortAsc = !this.sortAsc;
    }
  },
  computed: {
    filteredAndSortedData() {
      // 拷贝原数组避免sort方法修改原始数据（sort是原地排序）
      let result = [...this.testData];
      // 关键词过滤逻辑不变
      if (this.filterValue) {
        result = result.filter(item => item.name.includes(this.filterValue));
      }
      // 升降序排序逻辑不变
      let ascDesc = this.sortAsc ? 1 : -1;
      return result.sort((a, b) => ascDesc * a.name.localeCompare(b.name));
    }
  },
}
</script>

额外说明 #

我在代码里加了两个小优化：

• 在v-for中添加:key="index"，符合Vue的列表渲染最佳实践
• 用[...this.testData]拷贝原数组，避免sort方法直接修改接口返回的原始数据

所以你完全不需要做任何数组格式转换的操作，直接用接口返回的数据就可以实现你要的过滤和排序功能啦！

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