Получить дочерний элемент по клику - Vue JS

Question

Мне нужен эквивалент jQuery "this.find ()", чтобы получить дочерний элемент из этого раздела при щелчке.

Так что при нажатии = "showProd (6) я хочу найти" это. dropProd "внутри метода":

Изображение

<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 с соответствующим ссылочным именем внутри вашей функции, например:

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>

Answer 2

Вы можете использовать $ 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>

Доступ к нему в <script> через this.$refs.dropProd