javascript - 用 vuejs 做一个响应式组件

Question

我需要一个 Vue 组件来显示v-data-table来自 Vuetify 的一些 HTML 内容。我已经看到这篇文章Vue 2 contentEditable with v-model，我创建了一个类似的代码，如下所示。

我的问题是组件没有反应。当我单击“测试按钮”时，没有更新任何内容HtmlTextArea。

<template>
    <div>
      <v-btn @click="doTest()">Test Button</v-btn>
      <HtmlTextArea
        v-model="content"
        style="max-height:50px;overflow-y: scroll;"
      ></HtmlTextArea>
    </div>
<template>

export default {
  name: "ModelosAtestados",
  components: { HtmlTextArea },
  data: () => ({
    content: "",
  }),
  methods: {
    doTest() {
      this.content = "kjsadlkjkasfdkjdsjkl";
    },
  },
};


//component
<template>
  <div ref="editable" contenteditable="false" v-on="listeners"></div>
</template>

<script>
export default {
  name: "HtmlTextArea",
  props: {
    value: {
      type: String,
      default: "",
    },
  },
  computed: {
    listeners() {
      return { ...this.$listeners, input: this.onInput };
    },
  },
  mounted() {
    this.$refs.editable.innerHTML = this.value;
  },
  methods: {
    onInput(e) {
      this.$emit("input", e.target.innerHTML);
    },
  },
};
</script>

标签： javascriptvue.js

Answer 1

发生这种情况是因为仅在生命周期挂钩HtmlTextArea中将div内容设置为其道具，这不是反应性的。valuemounted

修复方法是在上设置一个观察者value，以便在div发生更改时更新内容以匹配：

// HtmlTextArea.vue
export default {
  watch: {
    value: {
      handler(value) {
        this.$refs.editable.innerHTML = value;
      }
    }
  }
}

演示