並び替えの方法がわかりません。

実現したいこと

ボールドテキスト
ここに実現したいことを箇条書きで書いてください。

▲▲機能を動作するようにする

「id,population,popurank,area,arearank」
これをそれぞれ昇順、降順に並び替えたい

前提

ここに質問の内容を詳しく書いてください。
学校で習っているVue.jsの授業での最終課題でプログラムを提出しなければなりません。
そこでそれぞれ並び替えたいのですがやり方がわかりません。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>vue.js 演習問題</title>
    
    <link rel="stylesheet" href="style.css" >
    <script src=
      "https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js">
    </script>

  </head>

  <body>
    <h2>山形県市町村ランキング</h2>
    <div id="app">
      <table border="5">
        <tr><th>市町村番号</th><th>市町村</th><th>人口数</th><th>人口数順位</th><th>面積数</th><th>面積数順位</th><th>HP</th></tr>
        <tr is="my-product" v-for="item in products" v-bind="item" v-bind:key="item.id"></tr>
      </table>
    </div>

    <script>
      Vue.component('my-product', {
    template: `<tr><td>{{ id }}</td>
              <td>{{ name }}</td>
              <td>{{ population }}人</td>
              <td>{{ popurank }}位</td>
              <td>{{ area }}k㎡</td>
              <td>{{ arearank }}位</td>
              <td><a  v-bind:href="url" target="_blank"><img v-bind:src="image"></img></a></td></tr>`,
    props: ['id', 'name', 'population', 'popurank', 'area', 'arearank', 'image', 'url'],
    });

  new Vue({
    el: '#app',
    data: {
      products: [
        { id: 1, name: '山形市', population: 242284, popurank: 1, area: 381.3, arearank: 6, url: "https://www.city.yamagata-yamagata.lg.jp/",  image: 'image/yamagata.png',},
        { id: 2, name: '米沢市', population: 78118,  popurank: 4, area: 548.5, arearank: 4, url: "https://www.city.yonezawa.yamagata.jp/", image: 'image/yonezawa.png'},
        { id: 3, name: '鶴岡市', population: 122203,  popurank: 2, area: 1311.5, arearank: 1, url:"https://www.city.tsuruoka.lg.jp/", image:'image/tsuruoka.png'},
        { id: 4, name: '酒田市', population: 98795, popurank: 3, area: 603.0, arearank: 3, url:"https://www.city.sakata.lg.jp/", image:'image/sakata.png'},
        { id: 5, name: '新庄市', population: 34127,  popurank: 8, area: 222.9, arearank: 14, url:"https://www.city.shinjo.yamagata.jp/", image:'image/sinjo.png'},
        { id: 6, name: '寒河江市', population: 40452,  popurank: 7, area: 139.0, arearank: 27, url:"https://www.city.sagae.yamagata.jp/", image:'image/sagae.png'},
        { id: 7, name: '上山市', population: 29092, popurank: 10, area: 240.9, arearank: 13, url:"https://www.city.kaminoyama.yamagata.jp/", image:'image/kaminoyama.png'},
        { id: 8, name: '村山市', population: 22652,  popurank: 12, area: 197.0, arearank: 19, url:"https://www.city.murayama.lg.jp/", image:'image/murayama.png'},
        { id: 9, name: '長井市', population: 25786,  popurank: 11, area: 214.7, arearank: 15, url:"https://www.city.nagai.yamagata.jp/", image:'image/nagai.png'},
        { id: 10, name: '天童市', population: 61496, popurank: 5, area: 113.0, arearank: 30, url:"https://www.city.tendo.yamagata.jp/", image:'image/tendo.png'},
        { id: 11, name: '東根市', population: 47950,  popurank: 6, area: 206.9, arearank: 18, url:"https://www.city.higashine.yamagata.jp/", image:'image/higashine.png'},
        { id: 12, name: '尾花沢市', population: 14913,  popurank: 16, area: 372.5, arearank: 8, url:"https://www.city.obanazawa.yamagata.jp/", image:'image/obanazawa.png'},
        { id: 13, name: '南陽市', population: 30295, popurank: 9, area: 160.5, arearank: 24, url:"http://www.city.nanyo.yamagata.jp/", image:'image/nanyo.png'},
        { id: 14, name: '山辺町', population: 13895,  popurank: 18, area: 61.5, arearank: 32, url:"https://www.town.yamanobe.yamagata.jp/", image:'image/yamanobe.png'},
        { id: 15, name: '中山町', population: 10897,  popurank: 21, area: 31.2, arearank: 35, url:"https://www.town.nakayama.yamagata.jp/", image:'image/nakayama.png'},
        { id: 16, name: '河北町', population: 17636, popurank: 15, area: 52.5, arearank: 33, url:"https://www.town.kahoku.yamagata.jp/", image:'image/kahoku.jpg'},
        { id: 17, name: '西川町', population: 4913,  popurank: 32, area: 393.2, arearank: 5, url:"https://www.town.nishikawa.yamagata.jp/", image:'image/nishikawa.jpg'},
        { id: 18, name: '朝日町', population: 6361,  popurank: 29, area: 196.8, arearank: 20, url:"https://www.town.asahi.yamagata.jp/", image:'image/asahi.png'},      
        { id: 19, name: '大江町', population: 7617,  popurank: 23, area: 154.1, arearank: 26, url:"https://www.town.oe.yamagata.jp/", image:'image/oe.jpg'},      
        { id: 20, name: '大石田町', population: 6518, popurank: 28, area: 79.5, arearank: 31, url:"https://www.town.oishida.yamagata.jp/", image:'image/oishida.png'},
        { id: 21, name: '金山町', population: 5098,  popurank: 30, area: 161.7, arearank: 23, url:"https://www.town.kaneyama.yamagata.jp/", image:'image/kaneyama.png'},
        { id: 22, name: '最上町', population: 8030, popurank: 22, area: 330.4, arearank: 9, url:"https://mogami.tv/", image:'image/mogami.png'},
        { id: 23, name: '舟形町', population: 5016,  popurank: 31, area: 119.0, arearank: 29, url:"https://www.town.funagata.yamagata.jp/", image:'image/hunagata.png'},
        { id: 24, name: '真室川町', population: 7111,  popurank: 25, area: 374.2, arearank: 7, url:"https://www.town.mamurogawa.yamagata.jp/", image:'image/mamurogawa.jpg'},
        { id: 25, name: '大蔵村', population: 3030, popurank: 35, area: 211.6, arearank: 16, url:"https://www.vill.ohkura.yamagata.jp/", image:'image/okura.png'},
        { id: 26, name: '鮭川村', population: 3979,  popurank: 34, area: 122.1, arearank: 28, url:"https://www.vill.sakegawa.yamagata.jp/", image:'image/sakekawa.png'},
        { id: 27, name: '戸沢村', population: 4186,  popurank: 33, area: 261.3, arearank: 11, url:"http://www.vill.tozawa.yamagata.jp/", image:'image/tozawa.png'},
        { id: 28, name: '高畠町', population: 22454, popurank: 13, area: 180.3, arearank: 21, url:"https://www.town.takahata.yamagata.jp/", image:'image/takahata.jpg'},
        { id: 29, name: '川西町', population: 14360,  popurank: 17, area: 166.6, arearank: 22, url:"https://www.town.kawanishi.yamagata.jp/", image:'image/kawanishi.png'},
        { id: 30, name: '小国町', population: 7085,  popurank: 26, area: 737.6, arearank: 2, url:"https://www.town.oguni.yamagata.jp/", image:'image/oguni.png'},
        { id: 31, name: '白鷹町', population: 13005,  popurank: 20, area: 157.7, arearank: 25, url:"https://www.town.shirataka.lg.jp/#gsc.tab=0", image:'image/shirataka.jpg'},
        { id: 32, name: '飯豊町', population: 6651, popurank: 27, area: 329.4, arearank: 10, url:"https://www.town.iide.yamagata.jp/", image:'image/ide.png'},
        { id: 33, name: '三川町', population: 7311,  popurank: 24, area: 33.2, arearank: 34, url:"https://www.town.mikawa.yamagata.jp/", image:'image/mikawa.jpg'},
        { id: 34, name: '庄内町', population: 20307,  popurank: 14, area: 249.2, arearank: 12, url:"https://www.town.shonai.lg.jp/", image:'image/shonai.png'},
        { id: 35, name: '遊佐町', population: 13059, popurank: 19, area: 208.4, arearank: 17, url:"https://www.town.yuza.yamagata.jp/", image:'image/yuza.png'},
      ],
    }
  });
    </script>
  </body>
</html>

試したこと

調べてコード打ってみましたが動きませんでした。

補足情報（FW/ツールのバージョンなど）

HTML,CSS,JavaScript,Vue.js使ってます。

kou20031020

2023/05/22 01:23

15分調べました。

1T2R3M4

2023/05/22 05:28

https://teratail.com/help/avoid-asking 学校の課題を解いてほしい等の質問は、具体的にプログラミングで困っている質問ではないと考え、推奨していません。行動規範に同意していないのでしょうか。

行動規範の内容に同意します

回答1件

一般的なjsとしての回答です

javascript
1const mysort=(name,order="desc")=>products.slice(0).sort((x,y)=>(order=="desc"?1:(order=="asc"?-1:0))*(y[name]-x[name]));
2console.dir(mysort("id","desc")); // idの降順
3console.dir(mysort("population","asc")); populationの昇順