4

¿alguien que me ayude con esto? quiero mantener la reactividad del input y poderla usar para el cambio de la propiedad ident de manera reactiva para la consulta a la api.

ya probe con los hook create y mounted, ademas de separandolo en methods llamados desde el mounted pero no me deja cambiar el numero en el input.

pensaria que se podria usar un watch para el manejo de la propiedad pero no sabria como implementarla.

Gracias por su Atención.

new Vue({

  el: "#app",
  data: {
    lista: [],
    ident: 2

  },
  mounted() {
    this.loadPokes();
  },
  methods: {
    loadPokes() {
      axios.get("https://pokeapi.co/api/v2/pokemon/" + this.ident + '/')
        .then(response => {
          this.lista = response.data
        })
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<html>

<head></head>

<body>
  <div id="app">
    <ul>
      <input type="text" name="" value="" v-model="this.ident" @change="loadPokes">
      <li v-for="poke in lista" :key="poke.key">{{poke.name}}</li>

    </ul>

  </div>
</body>

</html>

1 respuesta 1

2

Sí, puedes usar watch para eso usando el mismo nombre del dato que va a cambiar en la función. Quito la lista para simplificarlo ya que solo estás mostrando el nombre del pokemon. Por otra parte en el model no se pone this:

new Vue({

  el: "#app",
  data: {
    lista: [],
    ident: 2

  },


  watch: {
    ident(valor) {
      axios.get("https://pokeapi.co/api/v2/pokemon/" + this.ident + '/')
        .then(response => {
          this.lista = response.data
        })
    }
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<html>

<head></head>

<body>
  <div id="app">
    <ul>
      <input type="text" name="" value="" v-model="ident">
      <p> {{ident}} : {{lista.name}}</p>

    </ul>

  </div>
</body>

</html>

1
  • perfecto, gracias por su ayuda realmente soy muy nuevo en el tema y me estanco gran ayuda. Commented el 3 oct. 2018 a las 2:46

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.