单击时获取子元素- Vue JS

Question

我需要一个等同于"this.find()“的jQuery来在点击时从这个部分获取子元素。

所以在“showProd(6)I click= to find "this .dropProd”I a method“上：

Image

<div class="sections" @click="showProd(6)">
  <h2 class="padding-10">Limited Shelf Life</h2>
  <div class="dropProd" :class="{ activate : active_el == 6}">
    <div v-for="item in shelf" :key="item.id" class="niceBox">
      <p class="prod_title">{{item.title}}</p>
      <p class="prod_info">{{item.product_details}}</p>
    </div>
  </div>
</div>

Answer 1

您可以使用$refs

<div class="sections" @click="showProd(6)">
  <h2 class="padding-10">Limited Shelf Life</h2>
   <!-- note the ref attribute below here -->
  <div ref="dropProd" class="dropProd" :class="{ activate : active_el == 6}">
    <div v-for="item in shelf" :key="item.id" class="niceBox">
      <p class="prod_title">{{item.title}}</p>
      <p class="prod_info">{{item.product_details}}</p>
    </div>
  </div>
</div>

通过this.$refs.dropProd在<script>中访问它

Answer 2

您可以在函数中使用this.$refs和适当的引用名称，如下所示：

​

new Vue({
  el: '#app',
  data: function() {
    return {

    }
  },
  methods: {
    showProd(){
      console.log(this.$refs.referenceMe);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">

  <div class="sections"style="background-color: red" @click="showProd(6)">
    <h2 class="padding-10">Limited Shelf Life</h2>
    <div class="dropProd" ref="referenceMe">

    </div>
  </div>
</div>

​