I'm trying to do what I would think is rather simple, but I can't seem to find a built-in way to do it. Basically, I have several divs on a page that are using v-if conditions which are acting as filters for data on the page (think about a table with data that is then filtered by select boxes)
Below is a very simplified example, but basically, I'm wanting to set a variable in my data object once a v-if condition is satisfied. Then, if filters change and make a different v-if condition satisfied it would set the same variable to a different value.
I basically want a value that can be changed based on any filters on my page, as long as I have a way to set that value after any given v-if is satisfied.
I was hoping to be able to simply call a method (with an argument passed) once v-if resolved is possible
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>This kind of business logic should not be handled in template, but rather in a computed property. The most basic setup would look like:
data(){
return {
showData: "ABC"
}
},
computed: {
newValue(){
if (this.showData === "ABC") {
return "Some derived value"
}
return ''
}
}
Alternatively, you can use a watcher on showData, and call additional methods when any of the conditions are met.
watch: {
showData(val){
if (val === "ABC") {
this.newValue = "Some derived value"
this.someOtherMethod()
}
// Any other conditions to be checked
// or simply pass the value further to a method where all the checks are done
this.checkValue(val)
}
}