Hello i want to create a live search table on my django app using the vuejs cdn. On the POST side is working since it receives my API responses but when in it comes to render in vue-for
it seems doesn't render and I only get is the header of table but the actual table body haven't appear in html page
Here's my dashboard html file:
<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 : After banging my head on the wall, I finally figured out by changing the this
into app
since it is the main initiator of new vue({})
From this:
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)
})
}
},
Into this
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;
})
}
},
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.