Looking to accomplish a seemingly simple task, but struggling to find a native solution. I have multiple divs on a page with v-if conditions acting as filters for data (similar to filtering a table by select boxes).
Here's a basic example: I want to assign a variable in my data object once a v-if condition is met. If the filters change and a different condition is satisfied, I want to update the same variable with a new value.
I need a dynamic value that can be updated based on any page filters, as long as I can modify it after a v-if condition is met.
My hope was to simply call a method with an argument once a v-if is resolved.
var vm = new Vue({
el: "#app",
props: {
},
data: {
showData: 'ABC',
specificData: "here are some specifics",
newValue: ''
}
});<div id ="app">
<div v-if="showData === 'ABC'">
<!--Here, I want to set newValue to something like 'ROGER' unrelated to ABC-->
ABC
</div>
<div v-if="showData === '123'">
<!--Here, I want to set newValue to something like 'SAM' unrelted to 123-->
123
</div>
</div>