Displaying source code as part of a q-card-section (Solved)

mboeni

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.

Allan-EN-GB

I’m not 100% sure but isn’t this what the <pre> would do. It wouldn’t render the HTML inside.

mboeni

@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.

Allan-EN-GB

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

mboeni

@Allan-EN-GB

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.