Как получить правильный контент для отображения с помощью кнопок? (Vue / vuetify)

#vue.js

#vue.js

Вопрос:

Я пытаюсь использовать v-if и v-show для отображения содержимого двух разных страниц. Если вы нажмете на кнопку A, отобразится таблица для страницы A, а если вы нажмете на кнопку B, отобразится таблица для страницы B. Но с кодом, который у меня есть сейчас, обе страницы отображаются при нажатии на кнопку B. Как я могу получить нужную страницу в зависимости от нажатой кнопки? Я подумываю об использовании v-if / else, но я не уверен, как это сделать.

Мой код:

 <template>
<v-main>
    <v-row align="center" justify="space-around">
<v-col class="text-center" cols="10" sm="7">
       <v-btn v-on:click="first= !first">View first table</v-btn>
       <p v-show="first"><FirstTable/></p>
       <v-btn v-on:click="second= !second">View second table</v-btn>
       <p v-show="second"><SecondTable/></p>
</v-col>

</v-row>
</v-main>

</template>


  <script>
  import FirstTable from '@/pages/main-page/FirstTable'
  import SecondTable from '@/pages/main-page/SecondTable'
  export default {
  name: 'MainPage',
  components: {
      FirstTable,
      SecondTable

  },
  data() {
    return {
        first: false,
        second: false
    }
  },

  }
  

Ответ №1:

Это потому, что вы снова не устанавливаете значение first равным false. в любом случае, вот способ сделать это.

 <template>
<v-main>
    <v-row align="center" justify="space-around">
    <v-col class="text-center" cols="10" sm="7">
       <v-btn @click="toggleTable('first')">View first table</v-btn>
       <FirstTable v-if="activeTable === 'first'"/>
       <v-btn @click="toggleTable('second')">View second table</v-btn>
       <SecondTable v-if="activeTable === 'second'"/>
</v-col>

</v-row>
</v-main>

</template>


  <script>
  import FirstTable from '@/pages/main-page/FirstTable'
  import SecondTable from '@/pages/main-page/SecondTable'
  export default {
  name: 'MainPage',
  components: {
      FirstTable,
      SecondTable
  },
  data() {
    return {
        activeTable: null,
    }
  },
  methods: {
      toggleTable(val) {
          this.activeTable = val;
      }
  },
};
  

Комментарии:

1. вы знаете, как я могу заставить вторую кнопку оставаться на месте, когда я нажимаю на первую кнопку? Прямо сейчас, если я нажму на первую кнопку, вторая кнопка появится внизу страницы

2. переместите его.