質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

Q&A

解決済

1回答

9102閲覧

Vue.jsのdata-tableの数値を初期状態から降順で並べたい。

takochan1192

総合スコア100

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

0グッド

0クリップ

投稿2020/06/08 12:20

Vue.jsのdata-tableの数値データを初期状態から降順で並び替えた状態で表示したいと思っています。
下記は私が書いたコードの実行画面なのですが、これは、v-data-tableを使うとデータテーブルのヘッダー部分に↓が出てきて、それを押して並び替えた後の画像です。
初期状態からこのような形にしたいと思っています。

下記のコード実行画面

降順にするのは、真ん中の「感染者数」のデータです。
コードのどの部分をいじればいいのか、よくわからず困っております。
ご教示いただけませんでしょうか?

Vue.js

1<template> 2 <v-data-table 3 :headers="headers" 4 :items="covidList" 5 :items-per-page="5" 6 class="elevation-1" 7 ></v-data-table> 8</template> 9<script> 10import $axios from 'axios'; 11 12export default { 13 14 data(){ 15 return{ 16 headers:[ 17 { 18 text:'地域', 19 align:'start', 20 sortable:'false', 21 value:'name_ja', 22 }, 23 {text:'感染者数',value:'cases'}, 24 {text:'死亡者数',value:'deaths'}, 25 ], 26 } 27 }, 28 async asyncData({ $axios }){ 29 const response = await $axios.get('https://covid19-japan-web-api.now.sh/api/v1/prefectures') 30 return{ 31 covidList:response.data 32 } 33 } 34} 35</script>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

公式リファレンスにバッチリ載っていますのでご参考に。
https://vuetifyjs.com/ja/components/data-tables/#sort-on-multiple-columns

いっぱいサンプルがあるので熟読しておきましょう。

投稿2020/06/08 12:28

hope_mucci

総合スコア4447

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

takochan1192

2020/06/08 23:34

hope_mucci 様 ご回答ありがとうございます。参考にさえていただきまして、data-table内に 下記のようにいれてみましたが、うまく並べ変えることができませんでした。 :sort-by="['npatients']" :sort-desc="[false, true]" multi-sort リファレンスがちょっと理解できず、困っております。大変恐縮なのですが、ご教示いただけませんでしょうか?
hope_mucci

2020/06/08 23:59

もうちょっと粘ってみない? ・サンプルはcodepenで編集できる(右上のEdit in Codepenボタン)のでsort-byやsort-descを書き換えて動作を確認してみる ・sort-byに入っている項目がデータ上のどの項目と対応しているかを観察する Vue関連は本当に情報が少ないので、このようなドキュメントを読み解けないと厳しいです。粘りましょう。
takochan1192

2020/06/09 00:11

やはりドキュメントを解読できなければいけないのですね。 もう少し、頑張って粘ってみます。 ありがとうございます!
takochan1192

2020/06/09 08:21

なんとか並び替えることができました。 ありがとうございました。
hope_mucci

2020/06/09 09:14

それはよかった!これからも頑張ってくださいね。
takochan1192

2020/06/09 11:55

hope_mucci様 ありがとうございます!これからも頑張ります!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問