UI Updating on Struct Change

[Maxino22]

HI @woutdp I am building a full stack app performing crud. I have a page that I am pulling data from the db well its a table updates on the table also happen on the same page however when the rcords updated this is not reflected on the ui is there a way around this

<script>
    import { fade, scale } from 'svelte/transition'

    export let owners

    function saveUser() {
        ownerDetails = JSON.stringify(ownerDetails)
        setTimeout(() => toggleOwnersModal(), 1000)
    }

    function editOwner(owner_id) {}
</script>

{#if owners.length > 0}

<tbody class="bg-white divide-y divide-gray-200">
{#each owners as owner}
    <tr>
        <td
            class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900"
        >
            {owner.full_name}
        </td>

        <td
            class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
            >{owner.phone_number}</td
        >

        <td
            class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
        >
            {owner.email}
        </td>
        {#if owner.agent_agreement}
            <td
                class="px-6 py-4 whitespace-nowrap text-sm text-gray-500"
                >View</td
            >
        {:else}
            <td>-</td>
        {/if}

        <td
            class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"
        >
            <button
                on:click={editOwner(owner.id)}
                class="text-blue-600 hover:text-blue-900">Edit</button
            >
        </td>
    </tr>
{/each}
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
{:else}

That is on the svelte side and here is my phoenix side

  def mount(_params, %{"user_id" => user} = _session, socket) do
    manager = Manager.get_manager_by_user_id(user)
    owners = PropertyOwner.list_property_owners_by_manager_id(manager.id)
    {:ok, assign(socket, manager: manager, owners: owners)}
  end

  def render(assigns) do
    ~H"""
    <.svelte name="property_owner/PropertyOwnerList" props={%{owners: @owners}} socket={@socket} />
    """
  end

def handle_event("save", %{"value" => value}, socket) do
    IO.inspect(value)
    value = Jason.decode!(value)

    manager = socket.assigns.manager

    case register_owner_from_data(value, manager.id) do
      {:ok, _user} ->
        {:noreply,
         socket
         |> put_flash(:info, "Owner Added Successfully")}
    end

    {:noreply,
     socket
     |> put_flash(:info, "manager added successfully")}
  end

There is a form and a modal for creating new owners on my example above... the prop is however not reactive when added kindly help

[woutdp]

I don't think this is LiveSvelte specific, because the bug will still be there even if you use LiveView without LiveSvelte.

What's missing is that you're not assigning the owner in the handle_event. You need to do something like:

{:noreply, assign(socket, owners: new_owners)}

Just like you do in the mount.

[Maxino22]

my mistake thanks again