Below is the code I am working with:
<template>
<div id="app">
<span
contenteditable="true"
spellcheck="false"
style="width: 800px; display: block"
:v-text="textEl"
@focus="focused = true"
@blur="focused = false"
/>
{{ focused }}
</div>
</template>
<script>
export default {
data() {
return {
focused: false,
textEl: null,
};
},
methods: {
start() {
if (this.focused) {
this.textEl = "text with focus";
} else {
this.textEl = "text with not focus";
}
},
mounted() {
this.start();
},
},
components: {},
};
</script>
Even when the span element is focused, the method start does not execute. Why could this be happening?
I aim to display "text with focus" when the element is in focus and "text with not focus" otherwise. How can I achieve this considering that the start method is not functioning within mounted?