vue.js：値を変更するメソッドを切り替えるが、ビュー内で動作が変更されない

Question

リストの1つをクリックすると（トグル機能の条件を満たしている）、表示を行うか、ドロップダウンメニューを表示しない。これまでの方法では、クロムコンソール内の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>