Displaying source code as part of a q-card-section (Solved)
-
Hi there
I would like to display log entries that can contain tags as part of a card (in a q-card-section). An example would be:
9c37a421-c455-46e8-ae63-77399001a985 setting predicate useridle-count to 0 9c37a421-c455-46e8-ae63-77399001a985 setting predicate repetition-count to 0 9c37a421-c455-46e8-ae63-77399001a985 Pattern : BOTSTART <THAT> UNKOWN <TOPIC> inquiry name
How do I go about that, i.e. making sure tags are properly escaped, etc. Do I have to do the escaping manually or is there a simpler way of achieving that?
Cheers,
m. -
I’m not 100% sure but isn’t this what the <pre> would do. It wouldn’t render the HTML inside.
-
@Allan-EN-GB
I thought so too, this is what I am doing:<q-card class="my-card bg-blue-grey-3 text-blue-grey-9"> <q-card-section> <div class="text-subtitle2">KB Feedback Report</div> <div class="text-caption">by John Doe</div> </q-card-section> <q-card-section class="bg-white"> <div> <pre> <code> 9c37a421-c455-46e8-ae63-77399001a985 setting predicate useridle-count to 0 9c37a421-c455-46e8-ae63-77399001a985 setting predicate repetition-count to 0 9c37a421-c455-46e8-ae63-77399001a985 Pattern : BOTSTART <THAT> UNKOWN <TOPIC> inquiry name 9c37a421-c455-46e8-ae63-77399001a985 Category: BOTSTART <THAT> * <TOPIC> * 9c37a421-c455-46e8-ae63-77399001a985 File : lena_base.aiml 9c37a421-c455-46e8-ae63-77399001a985 Pattern : HELLO <THAT> UNKOWN <TOPIC> inquiry name 9c37a421-c455-46e8-ae63-77399001a985 Category: HELLO <THAT> * <TOPIC> * 9c37a421-c455-46e8-ae63-77399001a985 File : lena_greeting.aiml 9c37a421-c455-46e8-ae63-77399001a985 Response: Welcome back! It is good to see you. </code> </pre> </div> </q-card-section> </q-card>
But that does not seem to work at all…
Any ideas?
Cheers,
M. -
I think your only option is to do: <THAT>
Should be simple enough though so just do:
{{ yourHtmlStrVar.replace('<', '<').replace('>', '>') }}
- not ideal but not nasty (or make a filter / directive / computer prop etc. You get the point -
Funnily enough, I got it working without even touching <pre> or <code>. I simply had to add the log messages to a string array and then display that:
<q-card-section class="bg-white"> <div v-for="source in testAIMLSourceText" v-bind:key="source"> {{source}} </div> </q-card-section>
There seems to be some magic happening somewhere…I’ll try to get behind that once I have a quiet minute
Cheers,
M.