Javascript vuejs使用属性绑定显示API数据
我有一个简单的应用程序,其中一个用户选择一个人,vue为该用户的帖子发出api调用。每个帖子都有自己的评论。这些都来自 注释部分始终为空 密码笔是 我的htmlJavascript vuejs使用属性绑定显示API数据,javascript,vue.js,axios,Javascript,Vue.js,Axios,我有一个简单的应用程序,其中一个用户选择一个人,vue为该用户的帖子发出api调用。每个帖子都有自己的评论。这些都来自 注释部分始终为空 密码笔是 我的html <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id='app'> <div v-if='isError'> There was an error </div> <div v-e
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id='app'>
<div v-if='isError'>
There was an error
</div>
<div v-else-if='isLoading'>
Loading
</div>
<div v-else>
<select v-model="selectedUser">
<option v-for="person in info" v-bind:value="person"> {{person.name}}</option>
</select>
</div>
<div class="posts">
<div v-if="isLoadingPosts">
Loading...
</div>
<div v-else>
<ul>
<li v-for="post in postData">
<p>
{{ post.body }}
</p>
<button v-bind:id='post.id' v-on:click='getComments'>
View Comments
</button>
</li>
</ul>
</div>
</div>
<div class="comments">
<p>
{{ commentData }}
</p>
</div>
</div>
除了总是返回空对象的注释部分外,其他部分都可以正常工作。我也觉得我的代码是重复的,如果有任何更正,我们将不胜感激。因此,这种方法存在一些问题:
getComments : function (){
axios
.get('https://jsonplaceholder.typicode.com/posts/' + this.id + '/comments')
.then(response => (this.commentData =response.data))
}
}
首先,这里的this.id将在组件本身上查找id道具,而不是您试图在按钮中绑定的id
尝试将按钮代码更改为:
<button v-on:click='getComments(post.id)'>View Comments</button>
此外,您可能希望为其他axios调用添加一个与您的id类似的.catch处理程序
<button v-on:click='getComments(post.id)'>View Comments</button>
getComments : function (id){
axios
.get('https://jsonplaceholder.typicode.com/posts/' + id + '/comments')
.then(response => (this.commentData =response.data))
}
}