Updating values in the store

[DenisBotev]

Hello everyone,
recently started implementing Alpine in my workflow and it's been a huge timesaver!

Apologies if this has already been discussed, but I tried searching the discussions for this, and I couldn't find anything related.

I found a problem when working with textarea and x-bind:value. When a single value of an object in the store gets updated, the updated value is not displayed if the textarea has been modified.

Setup:

HTML:

<div>
    <button class="test-btn" data-text="some text input" data>Button 1</button>
    <button class="test-btn" data-text="some other text input">Button 2</button>
</div> 
<textarea name="alpine-test" id="alpine_test" rows="4" x-bind:value="$store.test.textinput"></textarea>

JS:

document.addEventListener("alpine:init", () => {
 // initial values
  Alpine.store("test", {
    textinput: "",
  });
});
 
 for (let btn of document.querySelectorAll(".test-btn")) {
  btn.addEventListener("click", (e) => {
    let txt = btn.getAttribute("data-text");
    updateAlpine(txt);
  });
}
  

The expected behavior (to me) is that when we click each button, the textarea value changes to each button's respective data-text. This works as expected when we click each button. However, if we, for example, click Button 1, edit the textarea with some new value, and click Button 1 again, the value is not reset to "some text 1" when we use the below updateAlpine function:

function updateAlpine(txt) {
  Alpine.store("test").textinput = txt; 
}

This one, however, works:

function updateAlpine(txt) {
  Alpine.store("test", {textinput: txt}); 
}

This might be due to the way the reactivity engine works, but since I don't know anything about Vue. I'm also using the CSP build.

Not sure if I managed to explain the situation correctly, let me know if I should provide any additional details!
Thanks again for all your hard work!

[ekwoka]

Works fine here: https://awesomealpine.com/play?share=sWff70HDRF8c

[DenisBotev]

Thanks for the quick response! Apparently I didn't explain it properly, because your example shows the same behavior I'm reporting - when I click the first button the first time, the text changes to "world". When I type something into the textarea, for example "world1" and click the first button again, the text remains "world1" and does not revert to "world.

I hope I was able to explain it better this time

[SimoTod]

It's because the value in the store is already world. When you click for the second time on the same button, you are not changing the store so nothing will react.
You need to change the store value while you type either with x-model or with an input event: https://awesomealpine.com/play?share=N53luoNBuIQC

[ekwoka]

Ah, yes, that would do it. Setting it to the same thing won't work.

[DenisBotev]

I see, so I definitely misunderstood how the store works. Thanks!