常連

注目の的

Nuxt.jsで、初回ページ表示時はHTMLのdata属性が読まれているのですが、
ページ遷移後data属性が読み込まれない原因はどこにあるのでしょうか？

１、luxy.js( https://min30327.github.io/luxy.js/ )と言うスクロールに余韻を与え、さらに要素にdata属性を付与することでパララックスも演出できるプラグインを使用しているのですが、どうもページ遷移をし戻ってくるとパララックス部分が動かなくなります。

```html
<div class="text-box luxy-el" data-speed-y="-10" data-offset="150">
    <p class="title">{{item.name}} + {{index}}</p>
    <p class="category">{{item.category}}</p>
</div>
```
↑このdata部分でパララックスのパラメータを与えているのですが、動作しなくなります。



```layoutVue
<template>
  <div>
    <Mouse/>
    <Opening/>
    <Header/>
    <div id="luxy">
      <nuxt/>
    </div>
  </div>
</template>
```

↑また、このプラグインではパララックス処理の他に、#luxyを与えることで余韻あるスクロールが動作するようになるのですが、この部分はページ遷移後もうまく動作しています。このことからルーティング内に記載していることが怪しいとは思うのですが、解決法などあるのでしょうか。。

Nuxt.jsでのページ遷移後のhtmlについて

## 困っていること
Nuxt.jsとmicroCMSを連携してブログサイトを制作しています。
タイトルなどはうまく表示できたのですが、microCMSで「複数参照コンテンツ」に指定しているカテゴリーが上手く表示できません。

## 実現したいこと
カテゴリーが複数ある場合はliで複数表示し、１つの場合も同様に表示させたいです。

## 現状のコード（エラーで何も表示されません）
### 詳細記事ページ index.vue
```vue
<template>
  <div>
    <main>
      <h1>{{ title }}</h1>
      <ul>
　　　　
        <li v-for="categoryName in category" v-bind:key="category.name">
	  {{ categoryName }}
	</li>
      </ul>
      <div v-html="contents"></div>
    </main>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  async asyncData({ params }) {
    const { data } = await axios.get(
      `https://coding-junction.microcms.io/api/v1/blog/${params.slug}`,
      {
        headers: { 'X-API-KEY': process.env.API_KEY },
      }
    )
    return data
  },
}
</script>

```

### 詳細ページのjson（上記vueファイルのdataの中身）※microCMSで２つのカテゴリーを指定している場合
```json
  // 中略
  title: 'タイトル',
  // 中略
  category: [
    {
      id: 'xxxxxxx',
      createdAt: '2021-09-14T03:46:03.761Z',
      updatedAt: '2021-09-14T03:46:03.761Z',
      publishedAt: '2021-09-14T03:46:03.761Z',
      revisedAt: '2021-09-14T03:46:03.761Z',
      name: 'カテゴリー名１'
    },
    {
      id: 'xxxxxxx',
      createdAt: '2021-09-13T08:31:51.146Z',
      updatedAt: '2021-09-13T08:31:51.146Z',
      publishedAt: '2021-09-13T08:31:51.146Z',
      revisedAt: '2021-09-13T08:31:51.146Z',
      name: 'カテゴリー名２'
    }
  ],
  contents:'コンテンツの中身'
```

## microCMS上の設定について
この詳細記事はブログコンテンツとしてAPI登録してあります。

APIスキーマには、
フィールドID：category
表示名：カテゴリー
種類：複数コンテンツ参照

↑の複数コンテンツ参照先は、下記のカテゴリーAPIです。

カテゴリー
API名：カテゴリー
エンドポイント：https://ドメイン名microcms.io/api/v1/category
↓
APIスキーマには
フィールドID：name
表示名：カテゴリー名
種類：テキストフィールド
が設定されています。

お分かりの方いらっしゃいましたらご教授いただけると幸いです。
よろしくお願いいたします。

Nuxt.jsでmicroCMS上の配列（複数参照コンテンツ）をうまく取り出せない

Nuxt.js x microCMSでブログサイトを作成しています。
個別の記事（_id.vue）にて、
以下のように microCMSから記事のデータを取得できましたが、

```ここに言語を入力
import axios from 'axios'
export default {
  async asyncData({ $config, params, error }) {
    try {
      const { data } = await axios.get(`${$config.apiUrl}/blog/${params.id}`, {
        headers: { 'X-API-KEY': $config.apiKey },
      })
      return {
        item: data,
      }
    } catch (err) {
      error({
        errorCode: 404,
      })
    }
  },
```
次の記事や、前の記事へのリンクやタイトルの取得方法が
いろいろ調べてはいるのですが、わかりません。

参考になるサイトとして、
https://dev.ore-shika.com/post/microcms-prev-next/
を試したのですが、そのままではエラーになってしまいます。

どうしたものか、ご教授願います。

Nuxt.js x microCMSで前後の記事へのリンクを取得するには

[http://gimmicklog.main.jp/jquery/278/](http://gimmicklog.main.jp/jquery/278/)

上記のページを参考に、
読み込み中にLoading画面を表示させました。
少し動きのあるLoadingなので、1秒とかで消えてしまうのではなく
例えば、下記のようなことはどのようにすれば出来るのでしょうか？


**Loadingが3秒以内で完了する場合はLoadingを5秒間表示する→コンテンツ表示
Loadingが5秒以上かかる場合はLoading終了後→コンテンツ表示**


やり方、アドバイス、ヒントなど頂けると幸いです。
宜しくお願いします。


```lang-Javascript
$(function() {
  var h = $(window).height();
 
  $('#wrap').css('display','none');
  $('#loader-bg ,#loader').height(h).css('display','block');
});
 
$(window).load(function () { //全ての読み込みが完了したら実行
  $('#loader-bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);
  $('#wrap').css('display', 'block');
});
 
//10秒たったら強制的にロード画面を非表示
$(function(){
  setTimeout('stopload()',10000);
});
 
function stopload(){
  $('#wrap').css('display','block');
  $('#loader-bg').delay(900).fadeOut(800);
  $('#loader').delay(600).fadeOut(300);
}
```

Loading画面の時間を調整したい

以下のHTMLのコードの.tab 要素に、 .-select の付け替えを行いたいです。
classList というものがあると知り描いてみたのですが、以下のエラーが出てしまいます。
__Cannot read property 'toggle' of undefined__

正しく使うためのコードと、なぜこのようなエラーになるかをご教授いただけると幸いです。
まだまでjs初心者なので、質問が変だったらすみません。。。

よろしくお願い致します。


```HTML
<div class="tabSelector">
  <ul>
    <li class="tab -select">登記情報</a></li>
    <li class="tab">株主名簿</a></li>
 </ul>
</div>
```

```javascript
var target = document.getElementsByClassName('tab');
target.classList.toggle('-select');
```

javascriptを使ってクラスの付け替えをしたい

いつもお世話になっております。
###前提・実現したいこと
現在スマートフォンサイトを制作しております。
![イメージ説明](470f5bc6af81037e84633372b25bd137.png)
添付イメージのような、右矢印の見出しが付いたbox内に、
可変のボタンを2つ並べたいです。

下記ソースコードになります。
###該当のソースコード
```css
      .box{
        border:1px solid
      }
      span{
        display:block;
      }
      .inner_left {
          display: inline-block;
          background: #ccc;
          position: relative;
          font-size: 16px;
          font-weight: bold;
          text-align: center;
          padding: 8px 0 8px 6px;
        }
      .inner_left::after {
         content: "";
         display: inline-block;
         border: 32px solid transparent;
         border-left-color: #ccc;
         position: absolute;
         left: 100%;
         top: 0%;
      }
      .inner_right {
          display: inline-block;
          margin-left: 30px;
          vertical-align: top;
          width: 55%;
      }
      .btn {
          color: #333;
          padding: 16px;
          margin: 4px;
          background-color: #498ed2;
          color: #fff;
          text-align: center;
          width: 28%;
          display: inline-block;
      }
```
```html
      <div class="box">  
              <div class="inner_left">
                <div>テキストテキスト<span>テキストテキスト</span></div>
              </div>
              <div class="inner_right">
                <div class="btn">
                  ボタン
                </div>
                <div class="btn">
                  ボタン
                </div>
              </div>
        </div>
```

###発生している問題
上記のソースコードですと、画面を縮小した時には
思っているような動作なのですが、
画面が拡大した際にボタンの拡大が足りず、
一番外枠の右側が相当余ってしまう状態です。

添付イメージのように、
ボタンが横いっぱいになるようにしたく、ご教授いただければと思います。