【Vue(Nuxt)】v-ifで子コンポーネントの表示制御を行う

おすすめのオンラインプログラミング学習

v-ifやifで親コンポーネントからで子コンポーネントの表示制御を行う方法です。覚書も多少かねています。

propsで子コンポーネントの表示制御を行う

まず、子コンポーネントをv-ifで切り分け、親コンポーネントとデータのやりとりをするためpropsを用意しましょう、

    <b-container fluid="xl">
      <b-row v-if="showA" class="my-2 py-2">
        <b-col cols="12">表示A</b-col>
      </b-row>
      <b-row v-if="showB" class="my-2 py-2">
        <b-col cols="12">表示B</b-col>
      </b-row>
      <b-row v-if="showC" class="my-2 py-2">
        <b-col cols="12">表示C</b-col>
      </b-row>
    </b-container>

htmlはbootstrapvueを使っているため、適時書き換えてください。

  props: {
    showA: {
      type: Boolean,
      default: true
    },
    showB: {
      type: Boolean,
      default: true
    },
    showC: {
      type: Boolean,
      default: true
    }
  },

defaultをfalseにすると、その部分が非表示になります。

      <Childcomponents
        :show-a="showAToChild"
        :show-b="showBToChild"
        :show-c="showCToChild"
      />

ハイフンを使いなさいとwaringででたため命名はハイフンにしました。

falseにしたものだけ消えます。

import Childcomponents from '~/components/Childcomponents.vue'

export default {
  components: {
    Childcomponents
  },
  data() {
    return {
      // 子コンポーネントの表示管理
      showAToChild: false,
      showBToChild: true,
      showCToChild: false
    }
  }
}

propsはこちらの記事がわかりやすいです。

【Nuxt.js】props基礎編:コンポーネントに自由にデータを渡そう | aLiz Nuxt
前置き componentの内容を、ページによって変えたいってこと、ありますよね?親によって文字を変えたり、b ...

あとはUdemyなどで勉強しましょう。

vue.js/vuex/nuxt/firebaseのおすすめ入門本/動画
vue.js、vuex、nuxt、firebaseの入門本でおすすめはどれでしょう。おすすめ本だけではなく、動画講座やサンプルコードも紹介していきます。 現在、個人的にはvue.jsを使ってさらにnuxt.jsにステップアップしていま...
スポンサーリンク

電子書籍のおすすめ比較

親のページ名でif文の切り分け

値のやりとりがない場合、親のページ名で子コンポーネントを切り分けることもできます。

htmlとjsは各々次のとおりです。こちらは記述量が少なく簡単です。実は表示と非表示の制御だけならこっちでいいかも。

<div v-if="this.$route.name == 'parentPagename'">
親ページに表示するもの。
</div>
<div v-else>
その他のページに表示するもの。
</div>
if(this.$route.name == 'parentPagename'){
  console.log('this.$route.name(ページ名)', this.$route.name)
}
スポンサーリンク

コンポーネント設計の記事参考

よさそうな記事があったので紹介だけ。

classの条件分岐

おまけです。classの条件分岐は、いろいろな方法がありまますが、三項演算子を使う場合が多くシンプルですね。

<div :class="getData.name.includes('neru') === true ? 'bule' : 'green'">色変え</div>

あとは.bule{}と.green{}の2つのスタイルを用意すればOKです。

参考になれば幸いです。

人気記事  安いオンラインプログラミングスクールおすすめ比較
  • 無料体験あり、オンライン完結あり
  • プログラミングスクールはオンラインで格安に!
  • 電子書籍並みの価格で買える動画学習サイトも一緒に紹介!初心者から上級者向け英語コンテンツまであり。ソースコードは言語関係なしに世界共通!
スポンサーリンク
おすすめのオンラインプログラミング学習
neruをフォローする
スポンサーリンク
ebookbrain

コメント

タイトルとURLをコピーしました