Vue-for не отрисовывает объекты в html
Здравствуйте, я хочу создать живую таблицу поиска в моем django приложении, используя vuejs cdn. На стороне POST все работает, так как он получает мои ответы API, но когда дело доходит до рендеринга в vue-for
кажется, что он не рендерится и я получаю только заголовок таблицы, но фактическое тело таблицы не появляется на html странице
Вот мой html файл приборной панели:
<div id="app"class=" col-md-12 col-sm-12 py-3 px-4">
<!--Text search-->
<div class="input-group">
<input @keyup="send_namerequest" v-model="search_query" type="text" class="form-control form-control-lg" placeholder="Search Bogus Client"
aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="input-group-append">
<span class="input-group-text" id="basic-addon2"><i class="fas fa-search"></i></span>
</div>
<div id="eraser" class="input-group-append" @click="remove_search">
<span class="input-group-text" id="basic-addon2"><i class="fas fa-eraser"></i></span>
</div>
{%include "components/table.html"%}
</div>
table.html
<table v-show="true"id="recent" class="table p-0 w-0 table-lg table-responsive-sm table-striped table-bordered">
<tbody >
<tr v-for="client in resultsobj" :key="client.name">
<td ><#client.name#></td>
<td><#client.project.project_name#></td>
<td><#client.reason.reason_name#></td>
</tr>
</tbody>
</table>
app.js
var dash = new Vue({
el: '#app',
delimiters: ["<#", "#>"],
data: {
haveresults: false,
search_query: '',
resultsobj: [],
},
computed :{},
ready: function(){},
methods: {
// methods function
remove_search : function(){
this.search_query = "";
this.haveresults = false;
},
async send_namerequest(){
const res = await axios.post('/api/search/',{
client_name : this.search_query,
})
.then(function(response){
this.haveresults = true;
this.resultsobj = (response.data);
console.log(resultsobj)
})
}
//end
},
});
Update : После биения головой о стену, я наконец понял, что нужно изменить this
на app
, так как это главный инициатор new vue({})
Отсюда :
remove_search : function(){
this.search_query = "";
this.haveresults = false;
},
async send_namerequest(){
const res = await axios.post('/api/search/',{
client_name : this.search_query,
})
.then(function(response){
this.haveresults = true;
this.resultsobj = (response.data);
console.log(resultsobj)
})
}
},
В этом
remove_search : function(){
app.search_query = "";
app.haveresults = false;
},
send_namerequest : function(){
axios.post('/api/search/',{
client_name : app.search_query,
})
.then(function(response){
app.haveresults = true;
app.resultsobj = response.data;
})
}
},