在循环中更新对象值，使用 Vue 在所有项目上获得相同的值

Posted 2023-02-22

【中文标题】在循环中更新对象值，使用 Vue 在所有项目上获得相同的值

【英文标题】：Update object value in a loop getting the same value on all items using Vue

【发布时间】：2020-11-19 22:37:16

【问题描述】：

我正在一个循环中运行，它应该更新 vue 环境中对象内的一些值。

我尝试了 map、foreach 和 for 循环，但特定属性（例如 Id 或 show）总是得到相同的值。

我对 jsfiddle 采取了相同的逻辑（我将部分相同的数据放在那里进行播放）并且它在那里工作。

代码如下：

var data = t.data.map((item) => 
        item.Status = Status.Draft;
          if (item.IsSent) 
            item.Status = Status.Sent;
          
          return item;
        );

data.forEach((item) => 
     item.Buttons.forEach((b, index) => 
          const id =  Id: "button_" + item.ID + "_" + index ;
          let show =  show: false ;
          switch (b.action) 
              case ButtonActions.Duplicate:
              case ButtonActions.Delete:
              case ButtonActions.Preview: 
                show =  show: true ;
                break;
              
              case ButtonActions.Reports:
              case ButtonActions.Groups: 
                if (item.IsSent) 
                  show =  show: true ;
                 else 
                  show =  show: false ;
                
                break;
              
              case ButtonActions.Send:
              case ButtonActions.Schedule:
              case ButtonActions.Edit: 
                if (item.IsSent) 
                  show =  show: false ;
                 else 
                  show =  show: true ;
                
                break;
              
            
            Object.assign(b, id);
            Object.assign(b, show);
     );
    //console.log(item.Buttons);
); 

button.id 总是为所有按钮相同 id。 button.show 可以是真或假，但无论我使用什么循环，所有按钮总是相同， 控制台显示预期值， 然后在循环之后，奇怪的是，添加了属性但所有的值都相同。

看起来我发现了一个 Vue 错误！ :(

有人可以帮忙吗？

【问题讨论】：

请发布您的数据属性，以便获得更多信息。 ButtonActions 对象来自哪里？那是 Typescript 界面吗？

您好，感谢您的回复，您可以在 jsfiddle 中看到它，作为数字。

我实际上指的是 Vue 中的 data 属性。那是data() return: data

【参考方案1】：

在 vue documentation 关于对象的反应性警告中，

它说：

有时您可能希望将多个属性分配给现有对象，例如使用 Object.assign() 或 _.extend()。但是，添加到对象的新属性不会触发更改。在这种情况下，使用原始对象和 mixin 对象的属性创建一个新对象：

// instead of `Object.assign(this.someObject,  a: 1, b: 2 )`
this.someObject = Object.assign(, this.someObject,  a: 1, b: 2 )

因此，在这种情况下，这应该会有所帮助

b = Object.assign(, b,  id, show )

或者，您可以使用

this.$set(b, 'show', show);
this.$set(b, 'id', id);

【讨论】：

是的，我尝试了这两种解决方案，但都不起作用。我在 GitHub 中打开了一个问题。我尝试了所有我知道的现有选项，循环，对象分配，设置，一切。毕竟我在这里。

这很奇怪。我会再调查一下。同时，你认为你可以创建一个 Vue 版本的 jsfiddle 吗？目前正在使用的是香草 JS。

对不起，我不明白，首先，感谢您的帮助，其次，这里的代码是在Vue中，jsFiddle是在使用Vue库的js vanila中。当您说创建 vue 版本的 jsfiddle 时，您到底是什么意思？顺便说一句，我同意，这很奇怪。我打开了一个问题，就像我说的那样。

我不认为代码在 Vue.js 中。这是一个用 Vue.js 编写的 fiddle 示例。注意FRAMEWORKS AND EXTENSION 下的No-library (PURE JS) 是如何被选中的？将其与我链接的示例进行比较。此外，您需要初始化一个 vue 实例。 new Vue(......

我去查看了其他几个 vue jsfiddle 示例，虽然它们并不总是指定 FRAMEWORKS AND EXTENSION，但它们总是有一个新的 Vue 实例。我的错。 Example 1、Example 2 和 Example 3 做同样的事情。