Estoy tratando de hacer lo que creo que es bastante simple, pero parece que no puedo encontrar una forma integrada de hacerlo. Básicamente, tengo varios divs en una página que usan condiciones v-if que actúan como filtros para los datos en la página (piense en una tabla con datos que luego se filtran mediante cuadros de selección)
A continuación se muestra un ejemplo muy simplificado, pero básicamente quiero establecer una variable en mi objeto de datos una vez que se cumpla una condición v-if. Entonces, si los filtros cambian y hacen una condición v-if diferente, establecería la misma variable en un valor diferente.
Básicamente, quiero un valor que se pueda cambiar en función de cualquier filtro en mi página, siempre que tenga una forma de establecer ese valor después de que se satisfaga cualquier v-if.
Esperaba poder simplemente llamar a un método (con un argumento aprobado) una vez que v-si es posible resolverlo
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>Este tipo de lógica empresarial no debe manejarse en una plantilla, sino en una propiedad calculada. La configuración más básica se vería así:
data(){ return { showData: "ABC" } }, computed: { newValue(){ if (this.showData === "ABC") { return "Some derived value" } return '' } } Alternativamente, puede usar un observador en showData y llamar a métodos adicionales cuando se cumpla alguna de las condiciones.
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) } }