我對數組排序有問題，我不知道為什么

Question

我的代碼有問題，我不t know why it不起作用並且總是給出不同的錯誤我還是嘗試了錯誤：'arraysorted' is not defined no-undef

 <div>
   {{ arraysorted }}
 </div>
</template>

<script>
const Array = [];
export default {
 data: () => ({
   Array: [1, 24, 23, 56, 76, 5, 468, 97, 65, 90, 23, 53, 23],
   arraysorted: [],
 }),
 mounted: {
   ArraySort() {
     return arraysorted = Array.sort(function (a, b) {
       return b - a;
     });
   },
 },
};
</script>  

Answer 1

您可以使用計算屬性：

 new Vue({ el: "#demo", data: () => ({ myArray: [1, 24, 23, 56, 76, 5, 468, 97, 65, 90, 23, 53, 23], }), computed: { arraysorted() { const arrSorted = [...this.myArray] return arrSorted.sort((a, b) => b - a) }, }, })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> {{ arraysorted }} {{myArray}} </div>

Answer 2

組件安裝后調用mounted()生命周期鈎子。 因此，您可以直接進行排序並將結果分配給arraysorted變量，而不是在mounted中編寫方法。

現場演示：

 new Vue({ el: '#app', data: { Array: [1, 24, 23, 56, 76, 5, 468, 97, 65, 90, 23, 53, 23], arraysorted: [] }, mounted() { this.arraysorted = this.Array.sort((a, b) => b - a); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <pre>{{ arraysorted }}</pre> </div>