Vue 相同的类 div，仅展开子项，没有（此）父项

Question

所有div 的孩子和家长都在同一个班级。我将v-on:clickmethod 附加到仅切换被点击的父级的孩子之一，而不是所有的孩子。如果我添加（这个）该方法不起作用。谢谢。

        <div class="expand-box" v-on:click="textToggle()">
            <div class="expand-title">Lorem ipsum</div>
            <div class="expand-text">Child</div>
        </div>
        <div class="expand-box" v-on:click="textToggle()">
            <div class="expand-title">Lorem Ipsum</div>
            <span class="expand-text">Child.</span>
        </div>



mounted(){
      this.hideText();
},

methods: {
      hideText: function() {
        $(".expand-text").hide();
      },
      textToggle: function() {
        $(".expand-text").toggle(300);
      }
  }

Answer 1

首先，当您使用v-on:click 时，如果您不传递参数，则需要设置函数名称，如v-on:click="textToggle"。

不建议使用 jQuery 和 Vuejs 进行动画和 dom 操作， 你需要使用 css 或 Vuejs 动画：

• CSS 动画：
  • https://codepen.io/khofaai/pen/qJXbbr
  • http://optimizely.github.io/vuejs.org/guide/transitions.html

.msg {
    transition: all .3s ease;
    height: 30px;
    padding: 10px;
    background-color: #eee;
    overflow: hidden;
}
.msg.v-enter, .msg.v-leave {
    height: 0;
    padding: 0 10px;
    opacity: 0;
}

<p class="msg" v-if="show" v-transition>Hello!</p>

Answer 2

您可以将$event 作为textToggle 的参数传递，使其变为v-on:click="textToggle($event)"，然后您的方法将使用此引用来切换该元素，

textToggle: function(elem) {
  $(elem.target).toggle(300);
}

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  },
  mounted() {
    this.hideText();
  },

  methods: {
    hideText: function() {
      $(".expand-text").hide();
    },
    textToggle: function(elem) {
      $(elem.target).toggle(300);
    }
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<div id='app'>
  <div class="expand-box" v-on:click="textToggle($event)">
    <div class="expand-title">Lorem ipsum</div>
    <div class="expand-text">Child</div>
  </div>
  <div class="expand-box" v-on:click="textToggle($event)">
    <div class="expand-title">Lorem Ipsum</div>
    <span class="expand-text">Child.</span>
  </div>
</div>

您还可以在 HTML 元素中使用 ref 来获取该元素的引用，例如：

HTML

<div class="expand-box" v-on:click="textToggle('el1')" ref="el1">
    <div class="expand-title">Lorem ipsum</div>
    <div class="expand-text">Child</div>
</div>
<div class="expand-box" v-on:click="textToggle('el2')" ref="el2">
    <div class="expand-title">Lorem Ipsum</div>
    <span class="expand-text">Child.</span>
</div>

方法

textToggle: function(refId) {
  this.$refs[refId].toggle(300);
}