Vue Version: 2.6
Laravel Version: 5.4
In my VueJS DOM which is embedded within a Laravel blade file using laravel mix, the main data contains an images object as shown in the code snippet below:
data() {
return {
images: {}
}
}
Here is a snippet of the button source code:
<button :disabled="!images.pict0" @click="showPict('pict0')">
Show Image
</button>
Communication: Asynchronous
Problem: Even when asynchronous data arrives and updates the images object, the buttons are still disabled.
Solving steps I have tried without success:
- Setting the images object with Vue.set and using this.$forceUpdate()
- Adding a boolean flag to enable the buttons when new data comes in
- Wrapping the buttons in a
tag<template></template>
I am hoping to find a solution for this issue, thank you!