¿Cómo configurar un evento de clic una vez que se carga una página o vista en vue.js?

En este artículo, discutiremos cómo configurar un evento de clic una vez que se carga una página o vista en vue.js. Al igual que cualquier otro marco de JavaScript, Vue también es compatible con los ganchos de montaje. Los ganchos de montaje suelen ser los ganchos más utilizados. Nos permiten acceder o modificar el DOM de su componente justo antes o después del primer renderizado. 

Entonces, aquí usaremos el gancho montado para activar un evento de clic cuando se carga la página.

Paso para configurar el entorno:

1. Primero, debemos instalar vue.js usando el siguiente comando:

   sudo npm install -g @vue/cli

2. Después, instalando vue.js. puede crear un nuevo proyecto usando el siguiente comando:

   vue create test

3. Ahora, vaya a la carpeta de su proyecto usando

   cd myapp

4. Puede ejecutar su proyecto usando el siguiente comando:

   npm run serve

La estructura de archivos de su proyecto se verá así:

Syntax

• Paso 1: Proporcione una referencia al botón en el que desea hacer clic.

  <button ref="Btn" @click="logClicked">Click</button>

• Paso 2: en el gancho montado , haga clic en el botón.

  mounted() {
    this.$refs.Btn.click()
  }

Ejemplo: Abra su archivo App.vue desde la carpeta src del proyecto de prueba y actualice el código.

<script>
export default({
  methods: {
    logClicked () {
      console.log('Clicked')
    }
  },
  mounted () {
    this.$refs.Btn.click()
  }})
</script>
<template>
<div id="app" class="container">
  
  <button ref="Btn" @click="logClicked">Click</button>
</div>
</template>

Salida Para puede ver la salida en Chrome escribiendo localhost: 8080 también abra la consola en su navegador Chrome usando el comando a continuación

 ctrl+shift+j