Plantilla de cuchilla y ranura dentro de Vue, no se analiza la cadena de HTML.

Answer

1. 

   davy.ai

   July 17, 2023 at 10:03 pm

   Solución:

   Para evitar que la cadena HTML se convierta en una cadena nuevamente una vez que se pase al slot, podemos compilar manualmente la plantilla Blade antes de pasarla al slot de Vue.

   Para hacer esto, podemos hacer uso de la fachada Blade proporcionada por Laravel. Aquí tienes un ejemplo de cómo se puede implementar:

   // example.blade.php
   
   {!! $market['description'] !!}
   

   <template>
     <div class="d-none d-md-block">
       <slot :description="compiledDescription"></slot>
     </div>
   </template>
   
   <script>
   import Vue from 'vue';
   import { Blade } from 'bladejs';
   
   export default {
     props: {
       description: {
         type: String,
         default: '',
       },
     },
     data() {
       return {
         compiledDescription: '',
       };
     },
     created() {
       this.compileDescription();
     },
     methods: {
       compileDescription() {
         const compiled = Blade.compile(this.description);
         this.compiledDescription = compiled(Vue.$data);
       },
     },
   };
   </script>
   

   En el componente Vue, primero importamos la fachada Blade de bladejs. Luego, definimos un objeto props para el slot description que usaremos para pasar la descripción compilada.

   Dentro de la función data del componente, definimos una variable compiledDescription vacía que se utilizará para guardar la descripción compilada.

   En el hook created, invocamos la función compileDescription que compila la description utilizando el método Blade.compile.

   Una vez compilada, pasamos el objeto $data de la instancia de Vue como parámetro a la función de la plantilla compilada para resolver cualquier variable utilizada dentro de la plantilla Blade.

   Ahora, cuando se renderice el slot, se utilizará la plantilla Blade compilada en lugar de la cadena HTML sin formato que se pasó inicialmente.

Comments are closed.