Как поймать фокус на элемент с помощью vuejs?

Question

[Fluber]

Здравствуйте, есть такой код:

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

Пытаюсь поймать фокус, но почему-то нативный эвент focus не срабатывает на элементе span. Значение "focused" не меняется, всегда false. Как это можно решить?

Comments

[Алексей]

это с каких пор закрывающий тег для спана не нужен ? Да и само выражение "пытаюсь поймать фокус" крайне не понятно

[Сергей Левченко]

Алексей, в XHTML так можно писать. В шаблонах vue так делать тоже можно.

[Алексей]

Сергей Левченко, https://www.devguru.com/content/Technologies/xhtml... показывает "The separate closing tag is mandatory. "

Да и в том же гугле в одном из ишью Эван отвечал https://github.com/vuejs/vue/issues/1036

Vue templates need to be valid HTML. There are no "self closing tags" in HTML5, it's an XHTML syntax which is now outdated and you should never use it.

[Сергей Левченко]

Алексей, я все это знаю, это не отменяет того факта, что так писать можно. Вы видимо с Vue не работали и не дочитали комменты в issue. Не рекомендуется - да, но так писать можно и это работает в Vue шаблонах(при сборке они становятся рендер функциями и все корректно отрабатывает(рендерится уже валидный html)).

Answer 1

[Алексей]

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

Answer 2

[Дмитрий]

Пардон с мобилки пишу, если еще актуально и на основе комментариев выше.

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>

Просто делаете вычисляемым свойством и все меняется. Извините на sandboxe не смог с мобилки сохранить