2

我想在我的 Vue 应用程序中收听所有关于输入的焦点事件。为了获得当前关注的输入，我考虑将document.activeElement属性绑定到我的应用程序组件中的计算属性，但这不是反应性的，为什么？

在数据中声明 activeElement 也不是反应式的。

观察者也一样！

让它工作的唯一方法是在输入本身的焦点/模糊事件之后简单地返回值，但这不符合我的需要。

new Vue({
  el: "#app",
  data: {
    activeElem: document.activeElement.tagName,
    realActiveElem: document.activeElement.tagName,
  },
  methods: {
    getActiveElem() {
      this.realActiveElem = document.activeElement.tagName;
    }
  },
  computed: {
    focused() {
      return document.activeElement.tagName;
    }
  },
  watch: {
    activeElem(val, oldVal) {
      console.log(val !== oldVal);
    },
    focused(val, oldVal) {
      console.log(val !== oldVal);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2 @focus="getActiveElem()">
    Data: {{activeElem}}
  </h2>
  <h2>
    Computed: {{focused}}
  </h2>
  <h2>
    From function to data: {{realActiveElem}}
  </h2>
  <input placeholder="Focus/Blur me" id="test" @focus="getActiveElem()" @blur="getActiveElem()" />
</div>

有没有办法将文档或窗口属性绑定为响应式？

4

1 回答 1

0

Vue 只能对数据的更改做出反应，而不能对 DOM 做出反应。document.activeElement 中的更改是 DOM 更改。

您可以使用事件来触发更新数据的方法。例如：

new Vue({
  el: "#app",
  data: {
    element: ""
  },
  created() {
    document.addEventListener("focusin", this.focusChanged);
  },
  beforeDestroy() {
    document.removeEventListener("focusin", this.focusChanged);
  },
  methods: {
    focusChanged(event) {
      this.element = event.target.tagName;
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input id="mine">
  <p>{{ element }}</p>
</div>

于 2019-08-02T12:16:11.970 回答