Blade 中的 VueJS 模板未更新

Posted 2023-03-14

【中文标题】Blade 中的 VueJS 模板未更新

【英文标题】：VueJS Template Within Blade not Updated

【发布时间】：2021-05-26 08:42:33

【问题描述】：

Vue 版本：2.6 Laravel 版本：5.4

我在 laravel 刀片文件（laravel 混合）中有带有 :disabled 标志的 VueJS DOM，主要数据包含，图像对象如下代码：

data() 
  return 
    images: 
  

那么下面是一段按钮源代码：

<button :disabled="!images.pict0" @click="showPict('pict0')">
 Show Image
</button>

通信：异步

问题： 当异步数据到来时，这些按钮仍然处于禁用状态，即使观看图像对象数据已更改但这些按钮仍处于禁用状态。

解决步骤已尝试但失败：

用 Vue.set 设置图像对象，我的假设可能是由于 vue 中的对象反应性 + 结合 this.$forceUpdate() 添加布尔标志，希望数据来的时候布尔值设置为false，然后按钮启用， 在这些按钮周围添加<template></template>标签

希望得到解决，谢谢

【问题讨论】：

你能告诉我在成功检索数据后完整的images: 数据吗？

它包含带有 uri 字符串值 ex 的键。 pict0: "***.com/logo.jpg"

【参考方案1】：

您应该创建逻辑来操作按钮元素 (DOM)。

isDisabled() 
 // the conditions to make your button unable/disable

*或者使用 $refs 在 isDisabled() 中设置按钮值

ex 内部函数：

this.$refs.imagesBtn.disable = true/false

【讨论】：

感谢您的回答，启用/禁用取决于 pict0 的 uri，我会尝试以上两种方式，仍然无效。

【参考方案2】：

#已更新

如果是由于其他部分的错误引起的，就会出现问题。我检测到何时数据尚未获取，我在某个组件上发生事件，然后我尝试单击它以指示渲染仍在运行，但是当数据获取并触发错误时，我单击的事件已停止。

感谢您的回答Ihsan Fajar Ramadhan & Argo Raden