Skip to main content
corregir error tipográfico
Origen Enlace
user7176
user7176

Sí, puedes usar watch para eso usando el mismo nombre del dato que va a cambiar enlaen la función. Quito la lista para simplificarlo ya que solo estás mostrando el nombre del pokemonpokemon. 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>

Sí, puedes usar watch para eso usando el mismo nombre del dato que va a cambiar enla 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>

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>

Origen Enlace
user7176
user7176

Sí, puedes usar watch para eso usando el mismo nombre del dato que va a cambiar enla 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>