0

estoy desarrollando una aplicación con laravel 8 y alpine js, mi problema es el siguiente:

Tengo este codigo html en el cual uso alpine js para que sea reactivo

<div x-data="aboutFeatures()" x-init="toArrow()">
<div class="flex justify-center items-center my-16">
    <div class="w-max-content mx-auto flex bg-blue">
        <button class="bg-gray-100 w-8 h-8" x-bind:class="{ 'bg-yellow-500' : tab === 'trophy'} "
            x-on:click="toTrophy()">
        </button>
        <button class="bg-gray-100 w-8 h-8" x-bind:class="{ 'bg-yellow-500' : tab === 'arrow'} "
            x-on:click="toArrow()">
        </button>
        <button class="bg-gray-100 w-8 h-8" x-bind:class="{ 'bg-yellow-500' : tab === 'meditate'} "
            x-on:click="toMeditate()">
        </button>
    </div>
</div>
<div class="p-8 border-2 border-gray-100 rounded-lg">
    <h2 class="text-yellow-500 text-center text-xl font-bold" x-text="title"></h2>
    <p class="my-6" x-text="excerpt"></p>
</div>

Este funciona como un tab que cambia el contenido según el botón al que de click.

Y esta es mi función aboutFeatures():

function aboutFeatures() {
return {
    title: '',
    excerpt: '',
    tab: '',
    toTrophy: function () {
        this.title = 'Opcion 1';
        this.excerpt =
            "Somos la primera Institución Educativa Publica Virtual ";
        this.tab = 'trophy';
    },
    toArrow: function () {
        this.title = 'Metodologías inovadoras';
        this.excerpt =
            "Somos la primera Institución Educativa Publica Virtual";
        this.tab = 'arrow';
    },
    toMeditate: function () {
        this.title = 'Opcion 2';
        this.excerpt =
            "Somos la primera Institución Educativa Publica Virtual";
        this.tab = 'meditate';
    }
}

}

Cuando tengo la funcion en el mismo archivo blade dentro de una etiqueta <script> </script> funciona correctamente, pero cuando utilizo la misma función en el archivo app.js me genera este error:

Uncaught ReferenceError: aboutFeatures is not defined
at eval (eval at saferEval (app.js:209), <anonymous>:3:36)
at saferEval (app.js:209)
at new Component (app.js:1505)
at Object.initializeComponent (app.js:1946)
at app.js:1889
at app.js:1905
at NodeList.forEach (<anonymous>)
at Object.discoverComponents (app.js:1904)
at Object.start (app.js:1888)

El archivo si esta bien integrado ya que tengo otras funciones que si cargan y también ejecute el comando npm run dev para actualizarlo cuando lo modifico, la razón por la que quiero tener esa función en un archivo externo es para llevar un orden en mi código ya que los textos son muchos mas largos pero os recorte para publicar esta pregunta.

Psdt: No encontré la etiqueta de Alpine js, por eso coloque laravel y JavaScript como etiquetas.

2 respuestas 2

0

¡Hola @Crisfarc142!

Prueba a poner tu función aboutFeatures sobre el objeto global window:

window.aboutFeatures = () => {
  // ...
}

Alpine.js busca las referencias a las funciones directamente sobre el objeto global, y puede que cuando muevas esa función a app.js esa referencia se pierda, y Alpine.js no la encuentre.

Aquí lo que dice Alpine.js al respecto, en base a un issue similar

0

No se si aplique contigo, pero a mi me pasaba lo mismo y se arreglo al usar la ultima versión de AlpineJS. Antes usaba este CDN:

<script src="https://cdn.jsdelivr.net/gh/alpinejs/[email protected]/dist/alpine.min.js" defer></script> 
    

Y pase a usar esta otra version:

<script defer src="https://unpkg.com/[email protected]/dist/cdn.min.js"></script>

Suerte.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.