html inside qdialog



  • Hello! I need to show html code inside qdialog component (not plugin). In case it is not possible, I need to know how I could adapt the plugin to display an image.
    Thank you for your time!



  • @gaguerrero You can easily put anything you want in a qdialog component. Can you explain more your problem?

        <q-dialog v-model="isShowing">
          <q-card>
            <q-card-section>
              <div class="text-h6">Alert</div>
            </q-card-section>
    
            <q-card-section class="q-pt-none">
              <q-img src="http://example.com/image.png" />
            </q-card-section>
    
            <q-card-actions align="right">
              <q-btn flat label="OK" color="primary" v-close-popup />
            </q-card-actions>
          </q-card>
        </q-dialog>
    


  • Thank you for the answer, I need to show html text that comes from the backend in “strTextoConfirmar” property.
    This is the code

    <q-dialog v-model=“promptConfirmar” html:true persistent>
    <q-card>
    <q-card-section class=“row items-center”>
    <q-avatar>
    <img src="~assets/iconofirma.png">
    </q-avatar>

    	  <q-separator size="1em" color="white"/>			  
    	  <div class="q-ml-sm">{{strTextoConfirmar}}</div>
    	</q-card-section>
    	<q-card-actions align="right">
    	  <q-btn flat label="Cancelar" color="primary" v-close-popup />
    	  <q-btn flat label="Enviar" color="primary" v-close-popup @click="firmar()" />
    	</q-card-actions>
      </q-card>
    </q-dialog>


  • @gaguerrero If you want to display HTML, you can use:

    	  <div class="q-ml-sm" v-html="strTextoConfirmar"></div>
    

    instead of:

    	  <div class="q-ml-sm">{{strTextoConfirmar}}</div>
    

    Be very careful that the strTextoConfirmar is either not user generated, or sanitized as using v-html can open your app to XSS attacks.



  • Thank you! It’s what I was looking for


Log in to reply