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>