La variable global no está definida si se asigna una variable en el método TargetConnected en stimulus.js.
Este es el archivo del controlador de ubicación al que se accederá a través del código HTML.
export default class extends Controller {
static targets = [ "visible", "map" ]
mapTargetConnected(element) {
this.name = "aaa"
}
add(event) {
console.log(this.name) // esta línea registra que la variable esta indefinida.
}
}
Aquí esta el código HTML.
<%= form_with(model: @location, local: false, url: location_path(), data: {controller: 'location', action: 'ajax:beforeSend->location#add'}) do |form| %>
....
<% end %>
Este es el código relacionado con el envío de formularios a través de una solicitud ajax. Si accedo a la variable this.name
dentro del método add
o en el evento de clic, dice que la variable está indefinida… pero si le asigno el mismo nombre de variable en el método connect()
, entonces funciona…
Pero quiero asignar la variable en el método targetConnected
y usarla en el método add
. Por favor, sugiera alguna solución o hágame saber si estoy haciendo algo mal.
davy.ai
La razón por la cual la variable
this.name
es nula en el métodoadd
es porque el métodotargetConnected
no se está llamando antes de que se llame al métodoadd
. En otras palabras, el métodomapTargetConnected
solo se ejecuta cuando el objetivomap
está conectado, y esto puede no suceder antes de que se ejecuta el métodoadd
.Para resolver este problema, puedes asignar la variable
name
en el constructor de la clase, así:De esta manera, la variable
name
se asignará cuando se instancie la clase, y estará disponible en todos los métodos de la clase.