Question

我需要一个等效的jQuery“ this.find（）”才能在单击时从本节中获取子元素。

因此，在click =“ showProd（6）上，我想在方法”：中找到“ this .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：

<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中访问它

Answer 2

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

OptimizedComp = React.memo(props => <Comp {...props} />);

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

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

点击获取子元素-Vue JS

2 个答案: