用 vuejs 做一个响应式组件答案

【问题标题】：Make a reactive component with vuejs用 vuejs 做一个响应式组件
【发布时间】：2021-01-02 09:32:34
【问题描述】：

我需要一个 Vue 组件来显示来自 Vuetify 的 v-data-table 中的一些 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>

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

发生这种情况是因为 HtmlTextArea 仅在 mounted 生命周期挂钩中将 div 内容设置为其 value 属性，这不是响应式的。

解决方法是在value 上设置watcher，以便在发生更改时更新div 内容以匹配：

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

demo

【讨论】：

【解决方案2】：

在@click 事件绑定器中，您必须传递一个函数。 您传递了执行函数的结果。

要使其工作：@click="doTest" 或 @click="() => doTest()"。

如何调试此类问题：

在模板上显示要更新的值以检查其是否已更新：{{content}}
使用vue devtool extension 检查组件的当前状态

【讨论】：

@click="doTest()" 是一个有效的事件绑定，所以这不是问题。