我创建了一个REPL来说明我的问题. 所以我有一个带有元素的数组,这些元素将这些属性绑定到输入文件. 但改变这些价值观无济于事.在记录或添加时,所有更改都会丢失.

提前谢谢你

我试着给物品添加身份props

推荐答案

您需要传递引用数据类型(arrayobject)--这里是arrayItem,才能进行更新,因为更新总是指向内存中的同一引用.

在您的示例中,您正在传递基本类型(numberstring)-这里是xy,它们在创建时具有新的内存位置,因此更新不会在所有位置上完成!

项目

<script>
    export let arrayItem;
</script>

<div>
    <input bind:value={arrayItem.x}>
    <input bind:value={arrayItem.y}>
</div>

亲本

<script>
    import Item from "./Item.svelte"
    
    let array = [
        {
            x: 1, 
            y: 2
        }
    ];

    function handleAdd() {
        array = [...array, { x: 0, y: 0 }];
    }

    function handleLog() {
        console.log(array);
    }
</script>

<div>
    {#each array as arrayItem}
        <Item {arrayItem} />
    {/each}
    <button on:click={handleAdd}>add element to array</button>
    <button on:click={handleLog}>log array</button>
</div>

repl example

Javascript相关问答推荐

容器如何更改默认插槽中子项的显示?

React Native平面列表自动滚动

使用print This时, map 容器已在LeafletJS中初始化

*ngFor和@代表输入decorator 和选角闭合

vscode扩展-webView Panel按钮不起任何作用

通过嵌套模型对象进行Mongoose搜索

我在我的Java代码中遇到了问题,代码的一部分看不到先前定义的对象

Websocket错误—有一个或多个保留位开启:reserved1 = 1,reserved2 = 0,reserved3 = 0

为什么我的导航条打开状态没有在窗口addeventlistener(Reaction Js)中更新?

Angular 订阅部分相互依赖并返回数组多个异步Http调用

在Matter.js中添加从点A到另一个约束的约束

检索相加到点的子项

在不删除代码的情况下禁用Java弹出功能WordPress

如何利用CSS中的隐藏元素实现平滑扩展和防止网格行间隙

我想使用GAS和HTML将从Electron 表格中获得的信息插入到文本字段的初始值中

使用jQuery find()获取元素的属性

react -原生向量-图标笔划宽度

为什么NULL不能在构造函数的.Prototype中工作

Reaction路由v6.4+数据API:重试加载程序而不显示错误

如何在底部重叠多个div?