Vuejs - 焦点元素检查

Question

I have this code:

<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>

Full code .

When the span is focused, I set focused to true , but, why does the method start not run?

I need to show "text with focus" when the element is focused, and "text with not focus" when the element is not focused. How I can do it? Method start doesn't work inside mounted .

Answer 1

The method is only being called when the component is mounted.

You either need to make start a watcher so it runs whenever focused changes:

watch: {
    focused(newVal) {
        if (newVal) {
            this.textEl = "text with focus";
        } else {
            this.textEl = "text with not focus";
        }
    }
}

Or call start in the event-handlers:

@focus="start()"
@blur="start()"
...
start() {
    this.focused = !this.focused;

    if (this.focused) {
        this.textEl = "text with focus";
    } else {
        this.textEl = "text with not focus";
    }
},