我正在嘗試為移動設備做一個簡單的選單，但我沒有解決 vue 實體的問題
我的組件 nuxt 選單：
<template>
<header id="menu" class="menu-g">
<Nuxt-link to="/"><img src="~assets/logo.svg" alt="Logo de Lucas"/></Nuxt-link>
<div v-show="open">
<Nuxt-link to="/projets">Projets</Nuxt-link>
<Nuxt-link to="/articles">Articles</Nuxt-link>
<Nuxt-link to="/a-propos">à propos</Nuxt-link>
<Nuxt-link to="#mecrire">M'écrire</Nuxt-link>
</div>
<div @click="menu()">Menu</div>
</header>
</template>
<script>
export default {
data: {
open: true,
},
methods: {
menu: function() {
this.ouvert = false
}
},
}
</script>
我的錯誤
uj5u.com熱心網友回復：
為了讓每個實體維護其資料的獨立副本，該data選項必須是一個回傳物件的函式。
因此，在您的代碼片段中，只需更新為：
export default {
data: () => ({
open: true,
}),
}
有關更多資訊，請參閱Vue 檔案中的data必須是函式。
旁注，正如 Lawrence 所提到的，您在選單打開功能 ( ouvert--> open) 中有一個小錯字。如果要切換選單，可以執行以下操作：
methods: {
menu() { // Toggle menu open state
this.open = !this.open;
},
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/463060.html