如何根据来自页面上的 HTML 下拉框的值向 Svelte 商店添加动态值

Question

我正在使用 Svelte 代码，作为构建一个非常简单的购物篮/商店的一部分，但有一个我无法解决的问题！

问题：

我想更新对象数组中的特定属性，这些属性已在 Svelte 可写存储中使用，但我所做的任何更改似乎都被忽略了！

背景：

我有一个 Svelte 可写存储，定义为：

let products = writable(myjson.default);

这由一个数组中的 6 个对象组成，类似于：

[
{
  "id": 1,
  "name": "Italian House Blend",
  "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac tellus finibus, molestie purus id, placerat augue. Sed in arcu placerat, ultricies nibh et, auctor dolor.",
  "image": "/images/1.png",
  "large_image": "/images/1_large.png",
  "price": 18,
  "quantity": 1,
  "variant": ""
},...

我正在寻找更新变体条目 - 这将是以下三个条目之一：Coarse、Fine、WholeBean。这些来自我的产品卡组件中的下拉菜单。

下拉列表的值来源于此：

  let questions = [
    { id: 1, text: `Coarse` },
    { id: 2, text: `Fine` },
    { id: 3, text: `Whole Bean` }
  ];

... 我有一个 #each 块，它可以迭代并在屏幕上正确显示文本值。下拉框必须允许双向更新（这是通过名为selected 的属性完成的）

我已经能够 console.log out 在我的 addToCart 函数中选择的值 - 这将显示选定的值：

const addToCart = (product) => {
    console.log("selected", selected)
    for (let item of $cart) {
      if(item.id === product.id) {
        product.quantity += 1
        product.variant = selected.text  <---- SOURCE OF PROBLEM??
        $cart = $cart;
        return;
      }
    }
    $cart = [...$cart, product]
    console.log("cart", $cart)
  }

我的问题是我想将selected.text 属性添加到对象数组中，所以我最终在console.log 中得到了这个，然后可以在稍后阶段输出variant 属性：

cart 
[{…}]
0:
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam ac tellus finibus, molestie purus id, placerat augue. Sed in arcu placerat, ultricies nibh et, auctor dolor."
id: 1
image: "/images/1.png"
large_image: "/images/1_large.png"
name: "Italian House Blend"
price: 18
quantity: 1
variant: "<<NAME APPEARS HERE>>"
__proto__: Object
length: 1
__proto__: Array(0)

我知道我遗漏了一些明显的东西，但是花了 2 个小时试图弄清楚，我的头很痛！任何人都可以帮助我指出正确的方向吗？

Answer 1

如果我们检查addToCart 函数，请注意只有当产品已经在购物车中时，产品的变体才会被设置。如果产品不在购物车中，则 if 块中的任何代码都不会执行，这意味着未设置变体。

我们可以通过在$cart = [...$cart, product] 上方简单地添加product.variant = selected.text 来看到这是真的，如下所示：

const addToCart = (product) => {
  console.log("selected", selected)
  for (let item of $cart) {
    if(item.id === product.id) {
      product.quantity += 1
      product.variant = selected.text
      $cart = $cart;
      return;
    }
  }
  product.variant = selected.text  // ADDED LINE
  $cart = [...$cart, product]
  console.log("cart", $cart)
}