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>
Yes, you can use
watch
for that using the same name of the data that is going to change in the function. I remove the list to simplify it since you are only displaying the name of the pokemon . On the other hand,model
it does not putthis
: