No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

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

    Help
    2
    5
    268
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • mboeni
      mboeni last edited by 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.

      1 Reply Last reply Reply Quote 0
      • Allan-EN-GB
        Allan-EN-GB Admin last edited by

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

        mboeni 1 Reply Last reply Reply Quote 0
        • mboeni
          mboeni @Allan-EN-GB last edited by

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

          1 Reply Last reply Reply Quote 0
          • Allan-EN-GB
            Allan-EN-GB Admin last edited by

            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 🙂

            mboeni 1 Reply Last reply Reply Quote 0
            • mboeni
              mboeni @Allan-EN-GB last edited by

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

              1 Reply Last reply Reply Quote 0
              • First post
                Last post