Javascript vue.js:切换方法更改值，但视图中没有更改任何行为

如果我点击其中一个列表（满足切换功能条件），那么它应该显示或不显示下拉菜单。到目前为止，该方法切换更改了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>

CSS:

.打开.下拉菜单{
显示：块；
背景色：番茄；
}
.下拉菜单{
显示：无；
}

方法中的此

未指向vue实例，因此请使用普通函数而不是胖箭头函数

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

请参阅为什么不应在方法中使用

=>

箭头函数

在模板中添加类似的

v-show

属性

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

方法中的此

未指向vue实例，因此请使用普通函数而不是胖箭头函数

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

请参阅为什么不应在方法中使用

=>

箭头函数

在模板中添加类似的

v-show

属性

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

不知道具体情况，但这是有效的：

 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>

{{dropDownOpen}}


{{dropDownMenuItem.name}

不知道具体情况，但这是有效的：

 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>

{{dropDownOpen}}


{{dropDownMenuItem.name}

这是因为我忘了提到

v-show

属性。但是脚本应该可以工作。这是因为我忘了提到

v-show

属性。但是脚本应该可以工作。