Media Queries 対応について。


#1

初めて質問します。:sob:

こういう形で質問するのかどうか、戸惑ってますが

レスポンシブでの、簡単なタブ切り替えについての質問です。

PC 表示時は、Vue インスタンス不要

  • タブのトリガー全て表示、タブの箱も全て表示
  • タブのトリガーをクリックしても反応させない

スマホ表示時だけ、Vue インスタンスを作成したい

  • タブのトリガー全て表示して、アクティブ状態のものにアクティブクラス付与
  • タブの箱はアクティブ状態の1つだけ表示

という風にしたいのですが
下記のコードだと、無論うまくいかず、どうやって処理すべきか検索してて、ここにたどり着いた次第です。

ブラウザ幅を伸び縮みさせた時も、上記の状態になるようにしたいと思っています。。。:disappointed_relieved:

var items = document.querySelectorAll('.elements');

items.forEach(function (el, i) {
	new Vue({
		el: items[i],
		data: {
			isActive: 1
		},
		methods: {
			isSelect: function(num) {
				this.isActive = num;
			}
		}
	});
});


<div class="elements"><div>
	<div class="elements__head"><div>
		<div class="head__item" tabindex="0" @click="isSelect(1)" v-bind:class="{'this-active': isActive === 1}"><div>
			<h3><span>タブ1</span></h3>
		</div></div>
		<div class="head__item" tabindex="0" @click="isSelect(2)" v-bind:class="{'this-active': isActive === 2}"><div>
			<h3><span>タブ2</span></h3>
		</div></div>
		<div class="head__item" tabindex="0" @click="isSelect(3)" v-bind:class="{'this-active': isActive === 3}"><div>
			<h3><span>タブ3</span></h3>
		</div></div>
	</div></div>

	<div class="elements__body"><div>
		<div class="body__item" v-if="isActive === 1" v-cloak><div>
			<div style="height: 50vh; background-color: #f00;"></div>
		</div></div>

		<div class="body__item" v-if="isActive === 2" v-cloak><div>
			<div style="height: 50vh; background-color: #0f0;"></div>
		</div></div>

		<div class="body__item" v-if="isActive === 3" v-cloak><div>
			<div style="height: 50vh; background-color: #00f;"></div>
		</div></div>
	</div></div>
</div></div>