Php &引用;例如;laravel中的按钮不';在页面刷新之前,请不要更改状态

Php &引用;例如;laravel中的按钮不';在页面刷新之前,请不要更改状态,php,laravel,vue.js,Php,Laravel,Vue.js,我创建了一个“Like”功能,可以收藏一篇文章(我知道是因为我在单击“Like”后在DB中检查了收藏夹表)。但在我点击按钮后,按钮描述保持不变,而不是改为“不一样”,即“相似”文本在点击按钮后仍然存在。目前,状态/按钮文本仅在我手动重新加载/刷新页面后更改。请,我需要帮助,使按钮状态改变时点击,而不必手动刷新页面。非常感谢 \\ **Model Post.php**->包含检查Post是否受欢迎的方法 公共职能优先() { return(bool)Favorite::where('user\u

我创建了一个“Like”功能,可以收藏一篇文章(我知道是因为我在单击“Like”后在DB中检查了收藏夹表)。但在我点击按钮后,按钮描述保持不变,而不是改为“不一样”,即“相似”文本在点击按钮后仍然存在。目前,状态/按钮文本仅在我手动重新加载/刷新页面后更改。请,我需要帮助,使按钮状态改变时点击,而不必手动刷新页面。非常感谢

\\

**Model Post.php**->包含检查Post是否受欢迎的方法
公共职能优先()
{
return(bool)Favorite::where('user\u id',Auth::id())
->其中('post_id',$this->id)
->第一个();
}
**Model User.php**
公共功能收藏夹()
{
返回$this->belongtomany(Post::class,'favorites','user\u id',
“post_id”)->带时间戳();
}
**控制器**

我测试了vue组件,这似乎有效。您是否可以尝试将vue组件方法修改为以下代码并对其进行测试。注意URL和post数据之间的逗号

methods: {
  favorite(post) {
    axios.post('https://httpbin.org/post', post)
        .then(response => this.isFavorited = true)
        .catch(response => console.log(response.data));
  },

  unFavorite(post) {
    axios.post('https://httpbin.org/post', post)
        .then(response => this.isFavorited = false)
        .catch(response => console.log(response.data));
  }
}
如果您的“喜欢/不喜欢”按钮可以使用此按钮(我尝试时它就使用了),那么您的后端代码可能是罪魁祸首,并且没有使用成功的响应代码进行响应


当我删除axios请求并将isFavorited设置为true或false时,文本会正确更改。检查开发人员工具的javascript错误或检查网络选项卡,可能后端请求没有成功结束。你好,Siim,我不太明白。你能举个例子吗。axios请求是命中控制器的必要条件。请澄清一下@Siim,我试过你的代码,但对我无效。看看->
axios.post('/favorite/post',post)
当我使用上面的方法时,没有任何反应。按钮文本和数据库未更改。在开发人员工具中是否看到来自后端的成功响应?
methods: {
  favorite(post) {
    axios.post('https://httpbin.org/post', post)
        .then(response => this.isFavorited = true)
        .catch(response => console.log(response.data));
  },

  unFavorite(post) {
    axios.post('https://httpbin.org/post', post)
        .then(response => this.isFavorited = false)
        .catch(response => console.log(response.data));
  }
}