Blade 中的 VueJS 模板未更新

Question

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>标签

希望得到解决，谢谢

Answer 1

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

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

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

ex 内部函数：

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

Answer 2

#已更新

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

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