Why Vue doesn't show data from my WebApi with axios and params? - asp.net-web-api

Question

i am practicing with axios and Vue in the use of WebApi.
I have done this:
My template:
<template>
<form>
<div>
<div class="panel panel-default">
<div class="panel-heading"><h1><strong>Lista de nombres</strong></h1></div>
<div class="panel-body">
<table class="table table-hover table-bordered table-striped">
<thead>
<tr>
<th>Nombre</th>
<th>Apellido Paterno</th>
<th>Apellido Materno</th>
</tr>
</thead>
<tbody>
<tr v-for="usuario in usuarios">
<td>{{usuario.Nombre}}</td>
<td>{{usuario.Apellido_P}}</td>
<td>{{usuario.Apellido_M}}</td>
</tr>
</tbody>
</table>
</div>
</div>
<br />
<p>Buscar usuario</p>
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control" v-model="busqueda" placeholder="Buscar usuario" />
<button type="submit" class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>
</div>
</div>
</div>
</form>
</template>
And My Script:
<script>
import axios from 'axios'
export default {
data() {
return {
usuarios:[],
busqueda: ''
}
},
methods: {
buscarUsuario() {
axios.get('http://localhost:50995/api/GetUsuario', {
params: {
'id' : 7
}
}).then(response => {
this.usuarios = response.data
}).catch(e => {
console.log(e)
})
},
getUsuarios() {
axios.get("http://localhost:50995/api/GetUsuarios")
.then(response => {
this.usuarios = response.data
})
.catch(e => {
this.errors.push(e)
})
}
},
created() {
this.getUsuarios(),
this.buscarUsuario()
}
}
</script>
The method getUsuarios() is working well; but the method buscarUsuario() not; only if i put in the params ‘id’ a number the log of my WebApi records a query, but if write this code: this.busqueda not working. Either way, the result in the page is not working with the method buscarUsuario().
And finally friends, how to prevent load the page everytime i push the button?
Thank you very much!

Answer 1

It seems kind of strange. I conclude you reading it properly on server-side. So I bet your server only wants Number(7) not String(7). You should change basic stance of busqueda to null. Then add .number modifier to v-model. Like that:
<input type="text" class="form-control" v-model.number="busqueda" placeholder="Buscar usuario" />
How to prevent load the page everytime you push button?
Add .prevent modifier.
Change:
<button type="submit" class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>
To:
<button type="submit" class="btn btn-default" v-on:click.prevent="buscarUsuario">Buscar</button>
Also I recomend use # as shortcut for v-on:(in this example you could have use #click.prevent).
If it still refreshes. Add #submit.prevent="functionName" to form...

Answer 2

Use id without quote and click.prevent to prevent submit.
params: {
id: 7
}
<button type="submit" class="btn btn-default" v-on:click.prevent="buscarUsuario">Buscar</button>
also you can use button type="buttton"
<button type="button" class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>