Default click on a button when component loads in vue js

Question

I have a button in vue component within template as follow:

  <a href="#" @click="openTab" class="border-red px-8" id="activeSlide" data-target-quote="#yvoefrance">
    <img :src="inactive_logo[0]" class="logo" alt="yvoefrance logo" />
  </a>

I want it to be clicked by default when components loads after refreshing the page, how can I achieve this? I tried following but didn't work for me.

I thought the right place is created. Can anyone help? Thank you in advance.

export default {
  name: "component.showcase",
  components: {
    // ...
  },
  data() {
    return {
      // data here....
    };
  },
  created() {
    document.querySelector("#activeSlide").click();
  },
  mounted() {},
  beforeDestroy() {},
  computed: {},
  methods: {
    openTab: function(e) {
      e.preventDefault();
      const target_tab = e.target.parentElement.dataset.targetQuote;

      document.querySelector(target_tab).classList.add("active");
      e.target.src = require(`@/assets/img/testimonials/${target_img}_active.png`);
    }
  }
};

Do you want to give a bit of context why do you need this ? Also by looking at the button template, it doesn't look you are binding any event listener to it - how do you know it's not working ? — turbopasi
– turbopasi, Commented Jan 22, 2021 at 20:53
yes, I get this error [Vue warn]: Error in created hook: "TypeError: Cannot read property 'click' of null" — Mir Stephen
– Mir Stephen, Commented Jan 22, 2021 at 21:08

Dan · Accepted Answer · 2021-01-23 08:06:45Z

The button should call a method when clicked:

<button @click="someMethod">Show Content</button>

Then you can just call that method programmatically from a lifecycle hook instead of trying to manually trigger a click on the button:

methods: {
  someMethod() {
    console.log('someMethod called');
  }
},
created() {
  this.someMethod();  // Run the button's method when created
}

EDIT to match your edit:

You are using DOM manipulation but should manipulate data instead and let Vue handle the DOM. Here is a basic example of how you can do what you want:

new Vue({
  el: "#app",
  data() {
    return {
      logos: [
        {
          urlInactive: 'https://via.placeholder.com/150/000000/FFFFFF',
          urlActive: 'https://via.placeholder.com/150/FFFFFF/000000',
          isActive: false
        },
        {
          urlInactive: 'https://via.placeholder.com/150/666666/FFFFFF',
          urlActive: 'https://via.placeholder.com/150/999999/000000',
          isActive: false
        }
      ]
    }
  },
  methods: {
    toggleActive(logo) {
      logo.isActive = !logo.isActive;
    }
  },
});

<div id="app">
  <a v-for="logo in logos" @click="toggleActive(logo)">
    <img :src="logo.isActive ? logo.urlActive : logo.urlInactive" />
  </a>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Collectives™ on Stack Overflow

Default click on a button when component loads in vue js

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related