javascript - 事件和数据处理 Vue.js

Question

我是 Vue.js 的新手，在回答我的代码活动时遇到了麻烦：

因此，菜单按钮会在单击时从下拉框中打开选择，当您单击任何选择时，它会返回到菜单按钮

index.js

const vm = new Vue({
    el: '#root',
    data: () => {
        {return {menuClick: true}}
    },
    methods: {
      methodClick(e){
          console.log(event.target.value)
      }  
    },
    template: `
      <div @click="methodClick">
        <a class='dropdown-button btn' href='#' v-if="methodClick">Open</a>
        <ul class='dropdown-content'v-else="!methodClick">
          <li><a href="#!">one</a></li>
          <li><a href="#!">two</a></li>
          <li class="divider"></li>
          <li><a href="#!">three</a></li>
        </ul>
      </div>
    `
});

索引.html

<!--Don't edit this!  Change to the index.js file (click on the link on the left side) and edit that file-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<style>.dropdown-content{ display: block !important; opacity: 1 !important; }</style>
<div id="root">
</div>
<!--Don't edit this!  Change to the index.js file (click on the link on the left side) and edit that file-->

当我控制台记录它时，它只是说它是未定义的。

标签： javascriptvue.jsvuejs2

Answer 1

您还没有使用“menuClick”属性

const vm = new Vue({
    el: '#root',
    data: () => {
        return {menuClick: false} // changes added
    },
    methods: {
      methodClick(e){
          console.log(event.target.value);
          this.menuClick = !this.menuClick; // changes added

      }  
    },
    template: `
      <div @click="methodClick">
        <a class='dropdown-button btn' href='#' v-if="!menuClick">Open</a> // changes added
        <ul class='dropdown-content' v-else> // changes added
          <li><a href="#!">one</a></li>
          <li><a href="#!">two</a></li>
          <li class="divider"></li>
          <li><a href="#!">three</a></li>
        </ul>
      </div>
    `
});