He creado algunos mensajes para mi formulario. Uno de ellos es un mensaje donde el contenido nunca cambiará (a diferencia de mi mensaje de error donde el contenido cambiará dependiendo del error).

 <p class="form__success-message" v-else-if="soFarSoGood"> {{ soFarSoGoodMsg }} </p> statuses() { return { error: false, soFarSoGood: false, submissionReady: false, submitted: false, }; }, messages() { return { errorMsg: "", soFarSoGoodMsg: "All good so far! 👌", submittedMsg: "", }; },

El problema que estoy experimentando es que esto devolverá un valor nulo en el DOM.

Sin embargo, el mensaje deseado aparecerá en el DOM si establezco el valor en una cadena vacía inicialmente y actualizo el mensaje una vez que cambia el estado del formulario.

 messages() { return { errorMsg: "", soFarSoGoodMsg: "", submittedMsg: "", }; }, methods: { approveFormStatus(input) { if (input !== null) { this.soFarSoGoodMsg = "All good so far! 👌"; } } }

Quiero que este mensaje sea el mensaje predeterminado para esa condición específica. No quiero tener que configurarlo en uno de mis métodos.

¿Cuál es la solución a esto y qué estoy malinterpretando?

Salud