Is it possible to change data from outside?

[DahisC]

I am develop a website which is using Laravel blade engine (SSR) and Alpine to update views.

below is the sample of my code:

<div x-data="alpineObj">
  // here will do foreach loop to render some cards
</div>
<div id="map">
  // will dynamic add some element into this element (using Leaflet map plugin)
  <div id="marker">will created by JavaScript</div>
</div>

const alpineObj = alpine();
function alpine() {
  arr: [];
  updateArr(newArr) {
    this.arr = newArr;
  }
}

The situation is
I want to update binding data from outside.

I was trying to update alpine's binding data via alpineObj instance (like alpineObj.updateArr([1,2,3])), but when I changed that key arr, it didn't rerender the view, but arr has been changed.

is there have other way to do this or keywords? thanks a lot <3

[MuzafferDede]

you have few issues here,

• your object binding and function definition order is not correct
• you have some syntax errors arr: [];
• you should return object in your alpineObj function

here is a working codepen

[DahisC]

hello, thanks for your reply <3

sorry I forgot that return when I was writing this post, you're right.

and I tried some code on your codepen, like

// change arr
alpineObj.arr = [1,2,3,4]
setTimeout(() => {
  alpineObj.updateArr([2,3,4,5]); // trying to use the method to update value of `arr`
  console.log(alpineObj.arr); // value is [2, 3, 4, 5], but view didn't change (it still showing [1, 2, 3 ,4])
}, 3000);

did I do something wrong?

[MuzafferDede]

Oh, you want to change the value from outside of alpine component, got you... In that case as i know you have to access alpine data proxy and call the updateArr function from there as:

setTimeout(()=> {
  alpineObj.$el.__x.$data.updateArr([4,3,2,1])
},3000)

I have updated the codepen so you can have a look.

BTW, you can have more info about why and how here => Access Alpine.js component data/state from outside its scope

[DahisC]

yes, and I think that's the answer that I'am looking for!
it's very helpful, thank you :)

[arcanemachine]

Oh, you want to change the value from outside of alpine component, got you... In that case as i know you have to access alpine data proxy and call the updateArr function from there as:

setTimeout(()=> {
  alpineObj.$el.__x.$data.updateArr([4,3,2,1])
},3000)

I have updated the codepen so you can have a look.

BTW, you can have more info about why and how here => Access Alpine.js component data/state from outside its scope

The blog post link you provided doesn't work for Alpine v3.

I was able to get it to work by assigning a variable to the value of the selector containing the component:

let el = document.querySelector('[x-data]');

Then, I could access the data in el._x_dataStack[0].

Of course, the devtools extension is a better way of doing all this, but it wasn't working for a while so I had to resort to hacks like this.