Métodos de Vue.js

Un método de Vue es una función asociada con la instancia de Vue. Los métodos se definen dentro delmethodspropiedad. Veamos como funcionan.


¿Cuáles son los métodos de Vue.js?

Un método de Vue es una función asociada con la instancia de Vue.

Los métodos se definen dentro delmethodspropiedad:

new Vue({
  methods: {
    handleClick: function() {
      alert('test')
    }
  }
})

o en el caso de componentes de un solo archivo:

<script>
export default {
  methods: {
    handleClick: function() {
      alert('test')
    }
  }
}
</script>

Los métodos son especialmente útiles cuando necesita realizar una acción y adjunta unv-ondirectiva sobre un elemento para manejareventos. Como este, que llamahandleClickcuando se hace clic en el elemento:

<template>
  <a @click="handleClick">Click me!</a>
</template>

Pasar parámetros a los métodos de Vue.js

Los métodos pueden aceptar parámetros.

En este caso, simplemente pasa el parámetro en la plantilla y

<template>
  <a @click="handleClick('something')">Click me!</a>
</template>
new Vue({
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
})

o en el caso de componentes de un solo archivo:

<script>
export default {
  methods: {
    handleClick: function(text) {
      alert(text)
    }
  }
}
</script>

Cómo acceder a los datos desde un método

Puede acceder a cualquiera de las propiedades de datos del componente Vue utilizandothis.propertyName:

<template>
  <a @click="handleClick()">Click me!</a>
</template>

<script> export default { data() { return { name: ‘Flavio’ } }, methods: { handleClick: function() { console.log(this.name) } } } </script>

No tenemos que usarthis.data.name, solothis.name. Vue nos proporciona un enlace transparente. Usandothis.data.namegenerará un error.

Como vio antes en la descripción de los eventos, los métodos están estrechamente relacionados con los eventos porque se utilizan como controladores de eventos. Cada vez que ocurre un evento, se llama a ese método.

Descarga mi gratisManual de Vue


Más tutoriales de vue: