I am attempting to create a toggle flag that can switch between boolean values of true and false based on specific conditions.
// main.js
new Vue({
el: `#app`,
render: h => h(App,{
props:{
todoID: this.dataset.id
}
})
})
my App script
export default {
name: 'App',
props: {
todoID: String,
},
data() {
return {
isDone: false // initializing the flag here
}
},
...
A mixin method has been created
import Vue from "vue";
Vue.mixin({
methods: {
isCompleted() {
if (myconditions){
this.isDone = true; // updating the flag to true
}
},
},
});
When I try to display {{isDone}} in the template, it always shows false. How can I make this reactive so it changes dynamically according to the conditions?
Check out the demo I put together: https://codesandbox.io/embed/vigorous-bell-p1itu?fontsize=14&hidenavigation=1&theme=dark