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.


  • Admin

    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.


  • Admin

    I think your only option is to do: <THAT>

    Should be simple enough though so just do: {{ yourHtmlStrVar.replace('<', '&lt;').replace('>', '&gt;') }} - not ideal but not nasty (or make a filter / directive / computer prop etc. You get the point 🙂



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


Log in to reply