在 PUT 请求中使用括号表示法设置 json 对象的嵌套属性 (svelte + strapi)

Question

我在项目中使用 Svelte 和 Strapi。这是我的问题的简化版本：

我要发送 PUT 请求的 json。 (localhost:1337/shapes/1)

{
  id: 1,
  name: 'square',
  colors: {
    red: false,
    blue: false,
    green: false
  }
}

svelte 模板中的切换按钮：

{#each shapes as shape}
  <div on:click={toggleColor(shape, "red")}>red</div>
  <div on:click={toggleColor(shape, "blue")}>blue</div>
  <div on:click={toggleColor(shape, "green")}>green</div>
{/each}

切换功能（查看评论以查找缺少的内容）：

function toggleColor(shape, color) {
  let index = shapes.indexOf(shape);

  axios.put(`http://localhost:1337/shapes/${shape.id}`, {
    // How to write this part to toggle a color?
    // The commented code below doesn't work as it doesn't set a color without  
    // reseting others siblings
    // colors: {
    //   [color]: shape.colors[color] ? false : true
    // }
  })
  .then((res) => {
    coins[index].colors[color] = res.data.colors[color];
  })
  .catch((err) => {
    console.log(err.message)
  });
}

为了更清楚地了解这个版本发生了什么，它 returns 如果我点击 blue button 然后 red button:

{
  id: 1,
  name: 'square',
  colors: {
    red: true,
    blue: null,
    green: null
  }
}

预期响应：

{
  id: 1,
  name: 'square',
  colors: {
    red: true,
    blue: true,
    green: false
  }
}

Answer 1

你快到了。以下代码：

{
  colors: {
    [color]: shape.colors[color] ? false : true
  }
}

...将重新定义 colors 为其中只有一种颜色的对象。要同时获得以前的颜色，请使用 spread syntax，例如：

{
  colors: {
    ...shape.colors,
    [color]: shape.colors[color] ? false : true
  }
}

在 PUT 请求中使用括号表示法设置 json 对象的嵌套属性 (svelte + strapi)

Set nested property of json object using brackets notation in PUT request (svelte + strapi)

javascript

put

request

strapi

svelte

在 PUT 请求中使用括号表示法设置 json 对象的嵌套 属性 (svelte + strapi)

Set nested property of json object using brackets notation in PUT request (svelte + strapi)

javascript

put

request

strapi

svelte

在 PUT 请求中使用括号表示法设置 json 对象的嵌套属性 (svelte + strapi)