Esta pregunta puede sonar estúpida. Pero estoy aprendiendo alpino mientras lo implemento con rieles.
El problema es que estoy recibiendo este error.
alpine.js:1914 Uncaught ReferenceError: carouselData is not defined at eval (eval at d.el (alpine.js:144:14), <anonymous>:3:36) at d.el (alpine.js:144:14) at d (alpine.js:131:21) at f (alpine.js:139:12) at new be (alpine.js:1461:89) at Object.initializeComponent (alpine.js:1911:20) at alpine.js:1856:14 at alpine.js:1870:9 at NodeList.forEach (<anonymous>) at Object.discoverComponents (alpine.js:1869:15)y mi codigo es
testimonial_page.html.erb
<div class="mx-auto relative w-full" x-data="carouselData([{id: 1, text: 'first'}])"> <!-- INNER CODE --> </div>app/javascript/packs/testimonial.js
function carouselData(slides) { return { slides, activeSlide: 1, goToPrevious() { this.activeSlide = this.activeSlide === 1 ? this.slides.length : this.activeSlide - 1; }, goToNext() { this.activeSlide = this.activeSlide === this.slides.length ? 1 : this.activeSlide + 1; } }; } console.log("hi testimonial file loaded")Estoy cargando un archivo de testimonios en la consola, pero sigo recibiendo ese error. Estoy tan confundida ¿Qué pasa?
Aunque funciona bien si pongo el script en la misma página. Gracias de antemano.
Creo que el problema es que no tienes una clave para el objeto de slides .
Cambie la función carouselData a
function carouselData(slides = null) { return { slides: slides, activeSlide: 1, goToPrevious() { this.activeSlide = this.activeSlide === 1 ? this.slides.length : this.activeSlide - 1; }, goToNext() { this.activeSlide = this.activeSlide === this.slides.length ? 1 : this.activeSlide + 1; } }; } También podría considerar asignar las slides dentro x-init por si acaso, aunque no tiene que hacerlo, especialmente asumo que las diapositivas se procesan primero en el servidor.
<div class="mx-auto relative w-full" x-data="carouselData()" x-init="slides = [{id: 1, text: 'first'}]" > <!-- INNER CODE --> </div>Si tomas esa ruta, yo también haría algo como esto:
<template x-if="slides.length"> <!-- render slides --> </template>