can someone help me with this? I want to keep the reactivity of the input and be able to use it to change the ident property reactively for the api query.
I already tried with the create and mounted hook, in addition to separating it into methods called from the mounted but it does not let me change the number in the input.
I would think that a watch could be used to handle the property but I 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>