Vue-for 不会在 HTML 中呈现对象

Question

你好，我想在我的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
},

});

Answer 1

更新在绞尽脑汁之后，我终于把this换成了app，因为它是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)
})
}
},

到

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;
})
}
},