Php Laravel后端到Vue未显示正确排序的数据

简单情况：使用Laravel控制器从数据库中获取所有行，并使用Vue显示它们

Laravel从模型中生成正确排序（按名称）的结果，但是，当通过Vue获取并循环显示在HTML表中时，它们将按照存储在数据库中的顺序显示

控制器：

public function readCountryAll()
{
    $data = World::Countries()->sortBy('name');
    //return response()->json($data);
    return $data;
}

Vue：

代码
名称
通货
{{country.code}
{{country.full_name}
{{country.currency_code}
导出默认值{
已装入：函数（）{
这个；
},
数据（）{
返回{
国家名单：[]，
}
},
方法：{
读（）{
window.axios.get（“/readCountry”）
.然后（response=>this.countryList=response.data）
},
},
组成部分：{
},
}

通过JSON发送数据时，顺序将是随机的。您需要做的是在vuejs中创建一个计算属性，该属性可以称为“sortedCountryList”，并在那里进行排序。然后，您可以在需要输出排序列表的任何位置使用此计算属性

 <script>

  export default {

    mounted: function() { 
           this.read();
    },

    data() {
      return {
        countryList: [],
      }
    },
    methods: {

      read() {
        window.axios.get('/readCountry')
            .then(response => this.countryList = response.data)
      },
    },
    computed: {
            sortedCountryList: function() {
               return this.countryList.sort(function (a, b) {
                   return b.name - a.name;
               });

            },
    },
    components: {

    },
  }
</script>

导出默认值{
已装入：函数（）{
这个；
},
数据（）{
返回{
国家名单：[]，
}
},
方法：{
读（）{
window.axios.get（“/readCountry”）
.然后（response=>this.countryList=response.data）
},
},
计算：{
sortedCountryList:函数（）{
返回此.countryList.sort（函数（a，b）{
返回b.name-a.name；
});
},
},
组成部分：{
},
}

通过JSON发送数据时，顺序将是随机的。您需要做的是在vuejs中创建一个计算属性，该属性可以称为“sortedCountryList”，并在那里进行排序。然后，您可以在需要输出排序列表的任何位置使用此计算属性

 <script>

  export default {

    mounted: function() { 
           this.read();
    },

    data() {
      return {
        countryList: [],
      }
    },
    methods: {

      read() {
        window.axios.get('/readCountry')
            .then(response => this.countryList = response.data)
      },
    },
    computed: {
            sortedCountryList: function() {
               return this.countryList.sort(function (a, b) {
                   return b.name - a.name;
               });

            },
    },
    components: {

    },
  }
</script>

导出默认值{
已装入：函数（）{
这个；
},
数据（）{
返回{
国家名单：[]，
}
},
方法：{
读（）{
window.axios.get（“/readCountry”）
.然后（response=>this.countryList=response.data）
},
},
计算：{
sortedCountryList:函数（）{
返回此.countryList.sort（函数（a，b）{
返回b.name-a.name；
});
},
},
组成部分：{
},
}

这解决了我的问题

  computed: {
    sortedArray: function() {
      function compare(a, b) {
        if (a.name < b.name)
          return -1;
        if (a.name > b.name)
          return 1;
        return 0;
      }

      return this.countryList.sort(compare);
    }
  }

计算：{
SorterDarray:函数（）{
功能比较（a、b）{
如果（a.nameb.name）
返回1；
返回0；
}
返回此.countryList.sort（比较）；
}
}

这解决了我的问题

  computed: {
    sortedArray: function() {
      function compare(a, b) {
        if (a.name < b.name)
          return -1;
        if (a.name > b.name)
          return 1;
        return 0;
      }

      return this.countryList.sort(compare);
    }
  }

计算：{
SorterDarray:函数（）{
功能比较（a、b）{
如果（a.nameb.name）
返回1；
返回0；
}
返回此.countryList.sort（比较）；
}
}

您是否可以通过手动访问url来检查您的回复？因此，请通过浏览器检查它的排列顺序。您确定在vue中url应该是readCountry而不是readCountryAll吗？为什么要对//return response（）->json（$data）//part进行注释？如果您使用dd（$data），您是否按正确的顺序查看它们？是否可以通过手动访问url来检查您的响应？因此，请通过浏览器检查它的顺序。您确定在vue中url应该是readCountry而不是readCountryAll吗？为什么要注释//return response（）->json（$data）//part？如果您使用dd（$data），是否按正确的顺序查找它们？我尝试了计算属性，但仍然无法排序。Laravel返回集合与返回数组有什么不同吗？同样，当我通过Laravel控制器对数据进行排序时，它似乎是按ID和名称对Vue对象进行排序。我觉得Vue默认按表ID对其进行排序。我尝试了计算属性，但它仍然无法排序。Laravel返回集合与返回数组有什么不同吗？同样，当我通过Laravel控制器对数据进行排序时，它似乎是按ID和名称对Vue对象进行排序。我觉得Vue默认按表ID对其进行排序。