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.