时间戳

首页 > 解决方案 > 使用 JavaScript 创建的 Svelte 组件不接收响应式更新

javascript - 使用 JavaScript 创建的 Svelte 组件不接收响应式更新

问题描述

我使用以下 JS 在按钮单击时动态创建一个组件：

<script>
    export let order;

    function toggleModal(an_order){
        modal_open.set(!$modal_open);
        const modal = new OrderModal({
            target: document.querySelector('.modal_container-' + order.id),
            props: {
                order: an_order
            },
        });
    }
</script>

但是，每当我更新订单对象时，它都不会反应性地反映在创建的组件中。

如果我将组件直接放在 html 中，而不是像这样使其动态化：

<div class="modal_container-{order.id} fixed">
    <OrderModal {order} />
</div>

<div class="max-w-xs w-full overflow-hidden rounded-lg shadow-md bg-white cursor-pointer" on:click="{() => toggleModal(order)}">

然后它正常工作并且元素被反应性更新。

有没有办法让 JavaScript 创建的组件响应式更新？

*** 更新以显示它是如何插入的 ***

执行更新的函数：

function deleteItem(){
  order.order_items.splice(index, 1);
  $order_list = $order_list;
}

正如你所看到的，我明确地做了一个分配来触发更新，当组件不是通过 javascript 创建时指定的工作。

标签： javascriptdynamiccomponentssvelte

解决方案

这不起作用的原因是编译器将在编译期间创建反应元素之间的所有链接。您的Modal组件当时不存在，因此不可能这样做。这也解释了为什么直接添加 Modal 是有效的。

解决此问题的一种方法是使用商店并将此商店传递给模态。

一般来说，在 Svelte 中，您不会使用现有的代码。一种更Svelte的方法是使用 bool 来跟踪是否必须显示 Modal：

<script>
  let showModal = false
  function toggleModal() {
    showModal = !showModal
  }
</script>

{#if showModal}
  <Modal />
{/if}

推荐阅读