我正在尝试将用户id从我的刀片模板传递到Vue，以便向服务器发出Axios post请求
我正在尝试将用户id从我的刀片模板传递到Vue，以便向服务器发出Axios post请求
提问于 2019-02-20 01:47:11
但是，当我单击该按钮时，只有第一个按钮包含用户id，其余的返回null。另外，根据我在HTML上放id标签的位置，data-id是空的。如何将包含post Id的Axios post请求的数据从刀片视图传递到Vue.js？
const app = new Vue({
el: '#like',
data: {
post_id: '',
},
methods: {
whichId: function(event) {
this.post_id = this.$el.getAttribute('data-id');
console.log(this.$el.getAttribute('data-id'));
}
}
})<div class="container" id="like">
<table class="table mt-5">
<tbody>
@foreach ($posts as $post)
<tr>
<td><img src="images/profil.svg" class="rounded-circle border border-dark ml-2" width="60" height="60" alt=""></td>
<td>{{ $post->username->name }}</td>
<td>{{ $post->content }}</td>
<td>
<button v-on:click="whichId" data-id="{{ $post->id }}">
<img src="/images/heart.svg" width="30" height="30" />
</button>
</td>
<td>{{ $post->created_at->diffForHumans() }}</td>
</tr>
@endforeach
</tbody>
</table>
</div>回答 1
Stack Overflow用户
发布于 2019-02-20 04:12:10
this.$el将引用该元素。当使用PHP遍历记录时。您应该通过click事件处理程序传递id。感谢laracast的Wilk Randall的帮助。
methods: {
whichId (postId) {
console.log(postId);
}
}<td><button v-on:click="whichId({{ $post->id }})"<img src="/images/heart.svg" width="30"></button></td>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/54772121
复制相关文章
相似问题
腾讯云开发者
