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：

Did you try to import it:

import { computed } from "vue";

CodePudding user response：

by looking at your code you could make it better like this.

Importing the missing computed from "@nuxtjs/composition-api" and adding 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() {
  return {
    sanitizedContent: computed(() => DOMPurify.sanitize(props.content)),
    }
  }
});
</script>