How to catch focus on an element using vuejs?

Question

Vue.js

Hello, I have this code:

<template>
  <span
    tabindex="-1"
    contenteditable="true"
    spellcheck="false"
    style="width: 800px"
    v-text="displayText.join('')"
    @focus="focused = true"
  />
</template>

I'm trying to get focus, but for some reason the native focus event doesn't fire on the span element. The value of "focused" does not change, always false. How can this be resolved?

Answer 1

https://learn.javascript.ru/focus-blur#vklyuchaem-...

Answer 2

Sorry, I'm writing from a mobile phone, if it's still relevant and based on the comments above.

mplate>
  <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,
    };
  },
  computed: {
    textEl() {
      if (this.focused) {
        return "text with focus";
      } else {
        return "text with not focus";
      }
    },
  },
};
</script>

Just make it a computed property and everything changes. Sorry, I couldn't save from my mobile phone on sandboxe