連想配列をsort()で昇順に並べ替えたいです。

Question

前提・実現したいこと

連想配列をsort()で昇順に並べ替えたいです。

###問題点

下記のようなコードを作成してみたのですが、上手くいきません。

該当のソースコード

<div id="app">
<ul v-for="item in items">
 <li>{{item}}</li>
</ul>
<button v-on:click="sortItem">
 並べ替える
</button> 
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

var vue = new Vue({
 el:"#app",
 data: {
  items : [
  	{value:'いいい', hoge:'none1'},
    {value:'ううう',hoge:'none2'},
    {value:'あああ',hoge:'none3'}
  ]
  },
 methods: {
  sortItem:function(){
     this.items.sort(function(a,b){
     return a.value - b.value
  })
  }
 }
})

補足

コードペンにて、サンプルコードを作成しました。
https://codepen.io/kondo97/pen/dyWRzXN

解決策を分かる方がいらっしゃいましたら、ご教授いただけると大変助かります。

よろしくお願いいたします。

Answer 1

return a.value - b.value

valueが数値ならそうでしょうけど文字列だと引き算はできないのでは？

return a.value<b.value?-1:1;

みたいな感じでどうでしょう？

Comments

[genjiro]

ありがとうございます。
上記コードで実行できました。
大変助かります。

もし可能であれば、?-1:1の箇所を解説をお願いしてもよろしいでしょうか。
検索しても、イマイチ理解できませんでした。

[yambejp]

参考：
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

if( a.value<b.value){
return -1;
}else{
return 1;
}
ということです。
-1/1という数字には意味はなく単にプラスかマイナスかを
指定してやれば大丈夫です。
また一次ソートで同値だった場合二次ソートをしたい場合は
0を返して上げたりする必要があります。

[genjiro]

丁寧に回答して頂き、誠にありがとうございます。
理解できました。