#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. переместите его.