Blade 中的 VueJS 模板未更新

编程问答 2022-05-24

问题描述

Vue 版本：2.6
Laravel 版本：5.4

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

data() {
  return {
    images: {}
  }
}

下面是一段按钮源代码：

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

通信：异步

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

解决步骤已尝试但失败：

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

希望有解决方案，谢谢

解决方法

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

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

*替代使用 $refs 在 isDisabled() 中设置按钮值

ex 内部函数：

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

#更新

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

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

ajaxjavascriptlaravellaravellaravel-bladevue.js