首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >我正在尝试将用户id从我的刀片模板传递到Vue,以便向服务器发出Axios post请求

我正在尝试将用户id从我的刀片模板传递到Vue,以便向服务器发出Axios post请求
EN

Stack Overflow用户
提问于 2019-02-20 01:47:11
回答 1查看 132关注 0票数 1

但是,当我单击该按钮时,只有第一个按钮包含用户id,其余的返回null。另外,根据我在HTML上放id标签的位置,data-id是空的。如何将包含post Id的Axios post请求的数据从刀片视图传递到Vue.js?

代码语言:javascript
复制
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'));
    }
  }
})
代码语言:javascript
复制
<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>
EN

回答 1

Stack Overflow用户

发布于 2019-02-20 04:12:10

this.$el将引用该元素。当使用PHP遍历记录时。您应该通过click事件处理程序传递id。感谢laracast的Wilk Randall的帮助。

代码语言:javascript
复制
methods: {
    whichId (postId) {
          console.log(postId);
    }
}
代码语言:javascript
复制
<td><button v-on:click="whichId({{ $post->id }})"<img src="/images/heart.svg" width="30"></button></td>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54772121

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档