<script>
export default {
data () {
return {
my_alert: false,
text: '',
color: 'success'
}
},
methods: {
openAlt (text, color) {
this.text = text
this.color = color
this.my_alert = true
}
}
}
</script><template>
<div>
<v-btn @click="openAlt('This is alert', 'error')">Click me!</v-btn>
<v-snackbar v-model="my_alert"
:timeout="2000"
:color="color"
top right>
{{ text }}
<v-btn icon ripple @click="my_alert = false">
<v-icon>close</v-icon>
</v-btn>
</v-snackbar>
</div>
</template>I'm currently learning Vue.js and Vuetify. I've created a code snippet that displays an alert when a v-btn is clicked.
Is there a way for me to make this alert reusable across multiple pages?
I'd like to organize this code into a module so I can easily use it for alerts on any of my pages.
I appreciate any insights or guidance you can provide. Thank you!