jsonからgetしたdataの真偽値により、v-ifで表示する要素を切り替えたい

Question

前提・実現したいこと

以下に記述しているjsonファイルからdataの真偽値をgetし、それに伴いdataのidがtrueなもののみv-ifで表示しようとしています。
さらにいえば、最初に表示するテキストは一つのみ（一番最初のtrueのdata）で、「次へ」または「戻る」ボタンを押すことで、index.vueのthis.idの真偽値を切り替え、表示したいと考えています。
（currentのようなdataを作って+-していくことでdataの真偽値を切り替える？）

例えば、[id02, id05, id08, id09]がtrueのdataをjsonからgetした場合、
最初にデフォルトとしてthis.id.id02 = trueにし、「次へ」ボタンを押すことで、this.id.id02 = false, this.id.id05 = trueにするといったような処理を実現したいです。
イメージはタブの切り替えのような感じです。

currentの増減はmethodsを定義することによって行おうとしてますが、それ以前の処理で詰まっています。

色々調べてみましたが、解決できそうにないためアドバイスいただけないでしょうか？
よろしくお願いいたします。

該当のソースコード

<template>
  <section class="container">
    <p v-if="id.id01">this is id01</p>
    <p v-if="id.id02">this is id02</p>
    <p v-if="id.id03">this is id03</p>
    <p v-if="id.id04">this is id04</p>
    <p v-if="id.id05">this is id05</p>
    <p v-if="id.id06">this is id06</p>
    <p v-if="id.id07">this is id07</p>
    <p v-if="id.id08">this is id08</p>
    <p v-if="id.id09">this is id09</p>
    <p v-if="id.id10">this is id10</p>
    <div class="btn-wrapper">
      <div class="btn__inner-wrapper">
         <button type="button" class="btn-back">戻る</button>
         <button type="button" class="btn-next">次へ</button>
      </div>
    </div>
  </section>
</template>
<script>
//別ファイルで定義したrequest関数を読み込み（axiosでgetをしています）
import { request } from "~/data-sample/index";

export default {
  data() {
    return {
      id: {
        id01: false,
        id02: false,
        id03: false,
        id04: false,
        id05: false,
        id06: false,
        id07: false,
        id08: false,
        id09: false,
        id10: false
      }
    };
  },
  mounted() {
    //読み込んだrequest関数を使用
    request(this.$axios, this.$router)
      .then(response => {
        // trueのidのみ取得しオブジェクトを生成
        const activeKeys = Object.keys(response.id).reduce((o, key) => {
          if (response.id[key]) o[key] = response.id[key];
          return o;
　　　　　 //result {"id02": true, "id05": true, "id08": true, "id09": true,}
        }, {});
      })
  }
};
</script>

{
  "id": {
    "id01": false,
    "id02": true,
    "id03": false,
    "id04": false,
    "id05": true,
    "id06": false,
    "id07": false,
    "id08": true,
    "id09": true,
    "id10": false
  }
}

試したこと

とりあえず、jsonでgetしたdataをtrueのもののみオブジェクトとして生成しました。
そこからさきがわかりません。。
どなたかお力お借りできましたら幸いです。

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

"nuxt": "^2.4.2"
"vue": "^3.2.1"

Answer 1

処理を考えてほしいところですが
とりあえずこんな感じなのかと

<template>
  <section class="container">
    <p>{{ message }}</p>
    <div class="btn-wrapper" v-if="isButtonVisible">
      <div class="btn__inner-wrapper">
        <button type="button" class="btn-back" v-on:click="backButtonClick()">戻る</button>
        <button type="button" class="btn-next" v-on:click="nextButtonClick()">次へ</button>
      </div>
    </div>
  </section>
</template>
<script>
//別ファイルで定義したrequest関数を読み込み（axiosでgetをしています）
import axios from 'axios';

export default {
  data() {
    return {
      idx: -1,
      list: [
      ],
    };
  },
  computed: {
    message: function() {
      if(this.idx < 0) {
        return('');
      }
      return("this is " + this.list[this.idx].key);
    },
    isButtonVisible: function() {
      return(this.idx >= 0);
    },
  },
  methods: {
    backButtonClick: function() {
      this.idx = (this.idx + this.list.length - 1) % this.list.length;
    },
    nextButtonClick: function() {
      this.idx = (this.idx + 1) % this.list.length;
    },
  },
  mounted() {
    axios.get('./data.json')
    .then(response => {
      // trueのidのみ取得しオブジェクトを生成
      this.list.slice(0, this.list.length);
      this.idx = -1;
      Object.keys(response.data.id).forEach(key => {
        if(response.data.id[key] != false) {
          this.list.push({key: key, value: response.data.id[key]});
          this.idx = 0;
        }
      });
    });
  },
};
</script>

こんな感じ

Comments

[aa316316]

> rururu3さん
ご回答ありがとうございます！
上記の処理を試してみた結果、getしたtrueのdataのidのみ表示することができました！
ただ、現状ではtrueのものが全て同時に表示されてしまうため、これらを一つずつ表示してボタンに追加するmethods等で切り替える方法はありますでしょうか？
もしよろしければアドバイスいただけますと大変助かります。