Hello, this is my HTML file.
<div id="app1" v-cloak>
<input v-model="term" type="search">
<button @click="search">Search</button>
<p/>
<div v-for="post in posts" class="post">
<p><strong>@{{post.title}}</strong></p>
<p>@{{post.body}}</p
<br clear="left">
</div>
</div>
This is my app.js file:
const app1 = new Vue({
el:'#app1',
data:{
term:'',
posts:[],
noResults:false,
searching:false
},
methods:{
search:function() {
const url = `http://jsonplaceholder.typicode.com/posts/${encodeURIComponent(this.term)}` ;
fetch(url)
.then(res => res.json())
.then(res => {this.posts = res.posts;})
}
}
});
I need help with ensuring that when the search button is pressed with a value, the search results are appended to the post class. The Chrome Dev Tools show that the results are correct, but they do not display on my page. How can I achieve this?