input reactivity with vuejs and axios

Question

input reactivity with vuejs and axios

Navigation

#1 by (1 votes)

4

someone to help me with this? I want to keep the reactivity of the input and can use it to change the ident property in a reactive way for the query to the api.

and probe with the hooks created and mounted, apart from separating it in called methods from the mounted but it does not let me change the number in the input.

I would think that you could use a watch to manage the property but you would not know how to implement it.

Thanks for your attention.

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>

vue.js axios

asked by Aesirkony tasartir 02.10.2018 в 06:49

source

1 answer

Read a single character in C I need to use the GPS in Android when the phone is blocked or we exit the application

score 1 · Accepted Answer

Yes, you can use watch for that using the same name of the data that will change in the function. Remove the list to simplify it since you are only showing the name of the pokemon . On the other hand in the model does not put 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>