How to reload the data of a table with vue and axios? - asp.net-web-api

Question

Well, i have a table populated with v-for: "usuario in usuarios". The initial charge does it correctly. But when i push the button "Buscar" only my <p>{{nombre}}</p> shows data. Look at these pictures:
Table populated with data
In the above picture, the table was populated with data, through getUsuarios() method. But in the next picture the table only shows blank data.
Table with blank data and <p>{{nombre}}</p>
Here are my codes:
Template:
<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 class="btn btn-default" v-on:click="buscarUsuario">Buscar</button>
</div>
<p>{{nombre}}</p>
</div>
</div>
</template>
Script
<script>
import axios from 'axios'
export default {
data() {
return {
usuarios:[],
busqueda: '',
nombre: '',
}
},
methods: {
buscarUsuario() {
axios.get('http://localhost:50995/api/GetUsuario?id=' + this.busqueda)
.then(response => {
this.usuarios = response.data,
this.nombre = response.data.Nombre
}).catch(e => {
console.log(e)
})
},
getUsuarios() {
axios.get("http://localhost:50995/api/GetUsuarios")
.then(response => {
this.usuarios = response.data
})
.catch(e => {
console.log(e)
})
}
},
created() {
this.getUsuarios(),
this.buscarUsuario()
}
}
</script>
As you can see, the <p>{{nombre}}</p> is populated with the data of the ID that i put in the input. But the table only shows blank data.
The <p>{{nombre}}</p> is only for test if the buscarUsuario() method works, and it's works but not with the table.
And, how can i reload the data of the table with the properties of the ID when i push the "Buscar" button?
Thank you

Answer 1

Something is wrong in your buscarUsuario() logic: you are overwriting the initial correct array of usuario objects with a single object of one usuario
axios.get('http://localhost:50995/api/GetUsuario?id=' + this.busqueda)
.then(response => {
/* REMOVE THIS LINE */ this.usuarios = response.data,
this.nombre = response.data.Nombre
}).catch(e => {
console.log(e)
})