追加为数组内的数组

Posted 2023-02-22

【中文标题】追加为数组内的数组

【英文标题】：Append as array inside array

【发布时间】：2018-01-11 10:31:17

【问题描述】：

我有一个看起来像这样的对象，我可以使用以下方法推送数据。我还初始化了types 数据。

myObj = 
    1: ["a", "b", "c"],
    2: ["c", "d", "e"],

---

data: 
   types: 
,

methods: 

  pushValue(key, value) 
      var obj = this.types

      if (obj.hasOwnProperty(key)) 
          var idx = $.inArray(value, obj[key]);
          if (idx == -1) 
             obj[key].push([value]);
          
       else 
          this.$set(obj, key, [value]);
      
  ,

效果很好。

---

但是，现在我希望我的对象看起来像这样：

myObj = 
    1: 
        "a": [
           [],[]
        ], 
        "b": [
           [],[]
        ],
       
 

如何修改我的附加函数以附加这样的元素？

【问题讨论】：

你能分享更多关于对象输出的信息吗？我不太明白"a" => [ ... ] 是什么，也不太清楚您想使用pushValue 在新输出中将您的价值推向何处

我在复选框上的 @change 上获取键和值。 @change，推送值是用键触发的：1 或 2，值：a、b、c 等。我将 obj 编辑为 myObj，以免与方法中的混淆

那么您到底想在"myObj.1.a 中存储什么？？ this.types 和 myObj 之间有关系吗？因为我看不出myObj和pushValue有什么关系。

我只希望它在那里，即使是一个空数组。这样我就可以在 v-for 和使用索引中使用它，我可以理解它的计数；能够在:name子组件的属性中使用

那么你究竟会推入myObj.1.a 什么？我的意思是，什么将被推入空数组？数字 1 或 2，还是按键 a、b、c、...？因为当你执行pushValues时，你修改的是this.types，而不是myObj。即使在这一刻，我仍然不太明白myObj 的意义何在。或者您只想将一个包含两个空数组的数组附加到myObj.1.a??

【参考方案1】：

我只是根据我对@senty 尝试做的假设来回答这个问题：

pushValue 是一种将数字作为keys 和字符作为values 并保存到this.types 的方法，并且每当调用pushValue 时，this.types 都会有一个属性key 存储一个以value 为键的对象，它存储一个包含空数组的数组。如果那个数组（包含数组的那个）已经存在，另一个空的将附加到那个数组。最终this.types 将看起来像myObj

因此，pushValue 应该如下所示：

const app = new Vue(
  el: '#app',
  data: 
    types: 
  ,
  methods: 
    pushValue(key, value) 
      if (this.types.hasOwnProperty(key)) 
        if (this.types[key].hasOwnProperty(value)) 
          const orgValue = this.types[key][value];
          orgValue.push([]);
          this.$set(this.types[key], value, orgValue);
         else 
          this.$set(this.types[key], value, [[]]);
        
       else 
        this.$set(this.types, key, 
          [value]: [ [] ]
        );
      
    
  
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script>
<div id="app">
  <div>
    <p>pushValue(key, value)</p>
    <button v-on:click="pushValue(1, 'a')">(1, 'a')</button>
    <button v-on:click="pushValue(1, 'b')">(1, 'b')</button>
    <button v-on:click="pushValue(1, 'c')">(1, 'c')</button>
    <button v-on:click="pushValue(2, 'a')">(2, 'a')</button>
    <button v-on:click="pushValue(2, 'b')">(2, 'b')</button>
    <button v-on:click="pushValue(2, 'c')">(2, 'c')</button>
  </div>
  <div> types </div>  
</div>

【讨论】：

@senty 如果这是你想要的，请告诉我

非常感谢！这真的很好，除了一件事。对于其他部分，在 Vue 中，如果您不使用 .$set，它会更改值（我可以在调试器中看到它），但它不会在视图上创建组件或执行任何 v-for变量被使用。你能告诉我如何在 else 部分使用 $set 吗？ （我在过去 2 天里遇到了这个问题，所以我确定是这样）

@senty 刚刚将代码 sn-p 修改为使用 Vue 和 Vue.$set，现在应该一切正常。