LiveView Streams not updating when referencing external variable?

Phoenix Forum Questions / Help
1

Hey y’all I’m working on a new app and I think i’m misunderstanding streams. I’ve read the docs and I seem to be missing something.

Here’s the Heex snippet i’m working on,

      <div class="absolute inset-0 z-20" phx-update="stream" id="albums">
        <img
          :for={{dom_id, album} <- @streams.albums}
          id={dom_id}
          draggable="false"
          class="max-w-none border-blue-700 absolute top-0 left-0 box-border cursor-pointer"
          style={"transform: #{album[:transform]}; transform-origin: 0px 0px; border-width: #{if @selected_index == album[:id], do: "15px", else: "0"}; width: 512px; height: 512px;"}
          src={album["image"]}
          phx-click={JS.push("set_selected", value: %{id: album[:id]})}
          data-id={album[:id]}
        />
      </div>

The issue is that the style is not updating when the @selected_index changes. I saw something somewhere that says I would have to move selected attribute into the stream, but that feels really weird to me. That would require updating every item in the stream to selected=false anytime an item is selected. Is that the case? That feels wrong to me.

Thanks for the help!

2

Yes, you need to:
a) have any values you need changed in the items of the stream, and
b) explicitly insert (update) items when changed into the stream.

As for the styling I understand your pain, but you can do it differently. Use a CSS (tailwind) child selector in the parent element and style accordingly. That’s how I do it.

3

Thanks @DaAnalyst going forward i’ll use the tailwind solution for styling. I was tempted to just do that anyways, but I want to reach out to the forums to make sure I wasn’t misunderstanding something.

In this particular case though I decided to just go back to a regular list assign since i’m only dealing with a fixed list of 4 that is ephemeral for each liveview process anyways. It makes other code I need to write easier.

Thanks for your help