Vue.js event after condition element is rendered

Question

I need event or some workaround how to access currently appended element with v-if in jQuery with $(".myTarget")

var vue = new Vue({
  el: '#vue',
  data: {
    showEl : false,
  },
  watch: {
    showEl: function (newShowEl, oldShowEl) {
      console.log("Watch event: " + $(".myTarget")[0]); 
    }
  },
  methods: {
    toggleMyTarget: function () {
      vue.showEl = !vue.showEl;
      console.log("Toggle on click event: " + $(".myTarget")[0]); 
    }
  },
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="vue">
  <div v-if="showEl">
    <span class="myTarget">My element</span>
  </div>

  <button @click="toggleMyTarget">Toggle element</button>
</div>

if I use watch on showEl variable it triggers before element renders and I can't access that element yet. How to achieve to be able to access .myTarget immediately after it renders?

tony19 · Accepted Answer · 2022-07-15 22:05:50Z

3

Use $nextTick.

var vue = new Vue({
  el: '#vue',
  data: {
    showEl : false,
  },
  watch: {
    showEl: function (newShowEl, oldShowEl) {
      this.$nextTick(() => console.log("Watch event: " + $(".myTarget")[0]))
    }
  },
  methods: {
    toggleMyTarget: function () {
      vue.showEl = !vue.showEl;
      this.$nextTick(() => console.log("Toggle on click event: " + $(".myTarget")[0]))
    }
  },
});

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="vue">
  <div v-if="showEl">
    <span class="myTarget">My element</span>
  </div>

  <button @click="toggleMyTarget">Toggle element</button>
</div>

edited Jul 15, 2022 at 22:05

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Apr 18, 2018 at 12:49

Bert

82.6k17 gold badges205 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Vue.js event after condition element is rendered

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related