As a newcomer to Vue.js, there are some concepts that I may be overlooking. Despite working on it for months, I have been unable to find a solution. My goal is to change the message displayed in a v-alert by using a separate JavaScript script to import the message variable and alter it.
Below is a snippet from my App.vue file:
<v-app>
<v-alert transition="scale-transition" :type="success" max-width="280" height="55" class="justify-center">{{alert.message}}</v-alert>
...
In my appController.js file, I have declared the following variables:
export default{
data () {
return {
alert:{
visible: true,
type: "success",
message: "test"
}
My objective is to access these variables in another JavaScript script and modify them. Here is an example from my loginController.js file:
import {alert} from './appController.js';
export default {
methods: {
loginFunc() {
//When loginFunc is called, the message content changes to "Test 2"
alert.message = "Test 2";
}
}
}
However, when I trigger loginFunc from a v-btn, I encounter the following errors in the console:
vue.runtime.esm.js?c320:619 [Vue warn]: Error in v-on handler: "TypeError: Cannot set properties of undefined (setting 'message')"
TypeError: Cannot set properties of undefined (setting 'message')
What am I doing incorrectly? How can I resolve this issue and change the content of the message variable to be displayed in the v-alert?