[英]Vue.js how to use tabs to load different components
我試圖在我的選項卡上使用單擊事件來設置data()
內部變量的值,然后在我的組件的 if 語句中使用此變量來測試該值並在為 true 時顯示組件。 但這不起作用,我沒有收到任何錯誤。 我假設當標簽上的點擊事件觸發時變量的值沒有被設置。 我不能用這種方法實現功能嗎?
<template>
<div id="settings_page" class="page_body">
<h1>Settings</h1>
<div id="user_info" v-if="user">
<div id="tabs">
<div v-on:click="selected_tab == 'account'">Account Details</div>
<div v-on:click="selected_tab == 'divisions'">Divisions</div>
<div v-on:click="selected_tab == 'users'">Users</div>
<div v-on:click="selected_tab == 'columns'">Columns</div>
</div>
<div class="content">
<div v-if="selected_tab == 'account'">
<h2>Profile</h2>
</div>
<div v-if="selected_tab == 'divisions'">
divisions
</div>
<div v-if="selected_tab == 'users'">
users
</div>
<div v-if="selected_tab == 'columns'">
columns
</div>
</div>
</div>
</div>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
export default {
data() {
return {
selected_tab: 'account'
}
},
computed:mapGetters(['user']),
methods: {
...mapActions(['getProfile'])
},
created() {
this.getProfile();
}
}
</script>
您正在單擊事件處理程序中進行比較:
v-on:click="selected_tab == 'account'"
您應該使用如下分配:
v-on:click="selected_tab = 'account'"
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.