computed: { isInputReadonly () { return true }, readonlyClass() { return "{ 'q-input--readonly q-field__inner': "+this.isInputReadonly+" }" } }

在您的代码中，您的readonlyClass计算属性返回了一个字符串，这个字符串似乎是要表示一个对象字面量，包含一个CSS类名作为键和一个布尔值作为值。

然而，您的字符串语法有一些问题，并且在最终计算结果中，CSS类名被引号包裹，导致它不再被解析为一个类名。

您可以使用以下代码来修复这个问题：

computed: {
  isInputReadonly () {
    return true
  },
  readonlyClass() {
    return {
      'q-input--readonly': this.isInputReadonly,
      'q-field__inner': true
    }
  }
}

在这里，我们将readonlyClass计算属性返回值改为一个对象字面量，其中键是CSS类名，值是布尔值。这样，当isInputReadonly为true时，'q-input--readonly'类会被添加到元素上，否则不会被添加。'q-field__inner'类则始终会被添加。这样，您就可以正确地应用CSS类了。

相关问题

<q-input v-model="renderedHtml" type="textarea" outlined label="发票备注" dense clearable :rows="3" :readonly="true" style="background-color: #f5f5f5;border-radius: 4px;color: #555;width: 174.4%;"> </q-input> const renderedHtml = computed(() => { return DOMPurify.sanitize(event.submitData.REMARK) })

在你的代码中，你使用了 `<q-input>` 组件来展示富文本内容，并将其设置为只读。

如果你想要使用 DOMPurify 库来过滤和清理 HTML 内容，你需要在组件中引入 DOMPurify，并使用 computed 属性来生成经过过滤处理的 HTML 内容。以下是一个示例：

<template>
  <q-input v-model="renderedHtml" type="textarea" outlined label="发票备注" dense clearable
           :rows="3" :readonly="true"
           style="background-color: #f5f5f5;border-radius: 4px;color: #555;width: 174.4%;">
  </q-input>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      event: {
        submitData: {
          REMARK: '<p>这是一段包含<br>换行的 HTML 代码</p>'
        }
      }
    };
  },
  computed: {
    renderedHtml() {
      return DOMPurify.sanitize(this.event.submitData.REMARK);
    }
  }
};
</script>

在上面的示例中，我们首先引入了 DOMPurify 库。然后，在 computed 属性 `renderedHtml` 中，我们使用 DOMPurify 的 `sanitize` 方法来过滤和清理 `event.submitData.REMARK` 的 HTML 内容。最后，我们将过滤后的内容绑定到 `<q-input>` 组件的 `v-model` 上。

这样，经过 DOMPurify 过滤处理后的 HTML 内容将会显示在只读的 `<q-input>` 组件中。

请确保在组件中正确引入 DOMPurify 并安装相关依赖。另外，对于用户输入的 HTML 内容，仍然建议进行适当的验证和过滤，以确保安全性。