v-ifで細かくfooterを分岐させたい

Question

実現したいこと

• footerの実装

前提

初めまして。
エンジニア見習いでわからないことだらけでしたので、ここでご質問させていただきたいと思います。
それぞれの事業内容、会社概要などページがあり、最下部にお問い合わせと採用情報のFooterがあります。一番最後のページだけ採用情報のみにして最後のページだけfooterのデザインをいじりたい。
（router linkタグで移動できるようになってます。）

発生している問題・エラーメッセージ

v-ifを利用すると１部だけでなく、すべてにかかってしまってそれ以上先に進んでない状況です。

該当のソースコード

<template> <main>

<section class="footer-content">
  <router-link v-if="footer" id="contact-page" to="/information" class="contact-box">
    <p class="contact-text" @click="contact">お問い合わせ</p>
    <div class="icon-box">
      <img class="contact-mark" src="../assets/icon_contact.svg" alt="" />
    </div>
  </router-link>
  <a v-else href="https://www.google.com" class="recruit-box">
    <p class="recruit-text" @click="recruit">採用情報</p>
    <div class="icon-box">
      <img class="recruit-mark" src="../assets/icon_saiyou.svg" alt="" />
    </div>
  </a>
</section>

</main> </template>

試したこと

いろいろネットで調べて、見よう見まねでやってみたんですが、どれもうまく反映されませんでした。

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

未経験で始めたということもあり皆様にとっては初歩的なことでしたら大変申し訳ございません。
何卒お力添えのほど、よろしくお願いいたします。

Answer 1

v-ifを利用すると１部だけでなく、すべてにかかってしまってそれ以上先に進んでない状況です。

意味不明ですが、こういうことですかね。

• v-if="footer"がtrueになるので、<router-link ...の部分は表示される。
• けれどつづきの、<a ...の部分が表示されない。

この解釈で合っているのであれば、それはあなたが、<a...にv-elseを指定しているから、です。

それともこうこうことですかね。

• v-if="footer"がfaleになるので、<router-link ...の部分が表示されない。
• おまけに、子要素の、<p ...>お問い合わせ<div...>の部分も表示されない。

この解釈で合っているのであれば、それはあなたが、<p ...>お問い合わせ<div...>を<router-link ...の子要素として指定しているから、です。

Comments

[minarai]

shiketaさん
ご返信ありがとうございます。

言葉足らずで大変申し訳ございません。

前者のご認識の通りです。
<a>タグについてるv-elseを修正しましたが、どうしても最後のページのみお問い合わせのfooterが消せない状況になっております。

[shiketa]

> どうしても最後のページのみお問い合わせのfooterが消せない状況になっております。

わからん。複数ページがあったとき、最初のページがどうなってほしくて、最終ページがどうなってほしいのか、最終形を提示してください。コメントではなく、質問を編集して記載してください。