vue.js：更改值的切換方法，但在視圖中沒有行爲改變

Question

如果我點擊列表中的一個（滿足切換功能條件），那麼它應該顯示或不顯示下拉菜單。到目前爲止，方法切換會更改Chrome控制檯中dropDownOpen的值，但視圖中未顯示任何更改代碼：

控制檯顯示值發生更改，並且它在模板中未更改！

<ul> 
      <li v-for="(navHeading, index) in headerMenuItems" @click="toggle(navHeading.name)" :class="{'open': dropDownOpen}"> 
      <icon :glyph="navMenuIconNames[index]" :viewBox="navMenuIconNames[index].viewBox" :height="25" :width="50"></icon> 
      <a class="navigation-title" href="#">{{ navHeading.name }}</a> 
      <ul class="drop-down-menu"> 
       <li v-for="dropDownMenuItem in navHeading.children"> 
       <a class="drop-down-menu-item-title">{{ dropDownMenuItem.name }}</a> 
       </li> 
      </ul> 
      </li> 
</ul> 

腳本：

data() { 

     const dropDownOpen = false 
     return { dropDownOpen } 
    }, 
methods: { 
     toggle: (dropDownName) => { 
     if (dropDownName === 'Meer') { 
      this.dropDownOpen = !this.dropDownOpen 
     } 
     console.log(this.dropDownOpen) 
     return this.dropDownOpen 
     } 
    } 

CSS：

<style scoped> 
    .open .drop-down-menu { 
    display: block; 
    background-color: tomato; 
    } 

    .drop-down-menu { 
    display: none; 
    } 
</style> 

Answer 1

this在你的方法是不是指向VUE實例，因此使用的，而不是脂肪箭頭功能的正常功能

methods: { 
    toggle: function(dropDownName) { 
    if (dropDownName === 'Meer') { 
     this.dropDownOpen = !this.dropDownOpen 
    } 
    console.log(this.dropDownOpen) 
    return this.dropDownOpen 
    } 

請參閱warning爲什麼不應該使用=>帶方法的箭頭函數

在您的模板中添加v-show屬性。

<ul v-show="dropDownOpen" class="drop-down-menu"> 

Answer 2

並不確切地知道，但這個工作：

methods: { 
     toggle(dropDownName) { 
     if (dropDownName === 'Meer') { 
      this.dropDownOpen = !this.dropDownOpen 
     } 
     return this.dropDownOpen 
     } 
    }, 

和模板：

<ul> 
     <li v-for="(navHeading, index) in headerMenuItems" @click="toggle(navHeading.name)"> 
     <icon :glyph="navMenuIconNames[index]" :viewBox="navMenuIconNames[index].viewBox" :height="25" :width="50"></icon> 
     <span>{{ dropDownOpen }}</span> 
     <a class="navigation-title" href="#">{{ navHeading.name }}</a> 
     <ul v-show="dropDownOpen" class="drop-down-menu"> 
      <li v-for="dropDownMenuItem in navHeading.children"> 
      <a class="drop-down-menu-item-title">{{ dropDownMenuItem.name }}</a> 
      </li> 
     </ul> 
     </li> 
</ul>