Computed is not defined-CodePudding

I've got a error where computed is not defined, I can't seem to find how to solve this, even after placing it in computed: {}

<template>
  <component :is="tag" v-html="sanitizedContent" />
</template>
<script>
import { defineComponent } from "@nuxtjs/composition-api";

import DOMPurify from "isomorphic-dompurify";

export default defineComponent({
  name: "HTMLContent",
  sanitizedContent: computed(() => DOMPurify.sanitize(props.content)),
  props: {
    tag: {
      type: String,
      default: "div",
    },
    content: {
      type: String,
      default: "",
    },
  },
});
</script>

CodePudding user response：

By looking at your code, you could make it better like this:

Import the missing computed from "@nuxtjs/composition-api", and add the missing setup function, returning the value you want.

<template>
  <component :is="tag" v-html="sanitizedContent" />
</template>
<script>
import { computed, defineComponent } from "@nuxtjs/composition-api";
import DOMPurify from "isomorphic-dompurify";

export default defineComponent({
  name: "HTMLContent",
  props: {
    tag: {
      type: String,
      default: "div",
    },
    content: {
      type: String,
      default: "",
    },
  },
  setup(props) {
    return {
      sanitizedContent: computed(() => DOMPurify.sanitize(props.content)),
    }
  }
});
</script>

CodePudding user response：

Did you try to import it:

import { computed } from "vue";

and:

const sanitizedContent = computed(() => DOMPurify.sanitize(props.content))