如何将对象中特定键的值存储到数组中 - Vue

Posted 2023-02-22

【中文标题】如何将对象中特定键的值存储到数组中 - Vue

【英文标题】：How to store values from a particular key from an object into an array - Vue

【发布时间】：2019-10-04 15:26:33

【问题描述】：

我不得不说，我是整个 Vue 框架的新手。我创建了一个可选择的表。从此表中选择的数据存储在一个对象中。这个函数应该在后面运行。所以，我想我应该在计算部分运行它。我的对象看起来像这样。我正在尝试仅检索 ID。此数据存储在选定的变量中。

[  "id": 5, "name": "CD", "box": "A5", "spot": 1 ,  "id": 2, ""name": "DVD", "box": "A2", "spot": 1  ] 

我只想从键 id 中检索值。这些值应该存储在一个数组中。单击提交按钮时应推送数组。稍后我将使用这个数组将这个数组中的信息存储到数据库中。

您可以在下面找到我的代码。我想我错过了一些东西，因为它似乎不起作用。我应该如何引用这个自动运行的函数并且可以在我的控制器中调用该数组以将其放入数据库中？ 感谢您的帮助。

模板

<div class="row">
   <div class="col-2">
      <b-form-input v-model="date" class="form-control" type="date" value="getDate" ></b-form-input>
      <pre class="mt-3 mb-0"> date </pre>
   </div>
   <div class="col-6">
      <b-form-input v-model="description" placeholder="Enter some text"></b-form-input>
      <pre class="mt-3 mb-0"> description </pre>
   </div>
   <!-- Submit data to db -->
   <div class="col-4">
      <button class="btn btn-primary custom-button-width" center-block>Request antibody pool</button>
   </div>
</div>

javascript

data() 
  return 
    // data from db
    data: this.testerdata,
    // selected is the object where my selected data is stored.
    selected: [],
    // here should my id end up
    selectedids: ,
    description: '',
    date: '',
  
,
computed: 
  tester() 
    var array = [];
    for (var test in this.selected) 
      if (test == "id") 
        array += this.selected[test];
      
    
    console.log(array);
  
,
methods: 
  storeData: async function() 
    axios.post('/panel', 
      description: this.description,
      date: this.date,
      selectedids: this.tester(selectedids)
    ).then(function(response) 
      console.log(response);
    ).catch(function(error) 
      console.log(error);
    ).finally(function() 
      // always executed
    );
  ,
    

【参考方案1】：

问题出在这一行：

array += this.selected[test];

这是将项目添加到数组的方式：

array.push(this.selected[test]);

此外，您正在尝试遍历this.selected 的属性，但它是一个包含对象且没有属性的数组。相反，您希望循环遍历数组中的每个对象项和 push id 属性。

而且，由于this.selected 是一个数组，而不是一个对象，所以您不应该使用for...in 循环——它是用于对象的——因为无法保证顺序。您可以在MDN for...in docs 中阅读更多相关信息。

您可以使用普通的for 循环或数组的forEach 循环。我会显示forEach：

this.selected.forEach(obj => 
    array.push(obj.id);
);

【讨论】：

Selected 是当我的表中的某行被选中时存储我的数据的位置。所以，selected 是保存我的数据的对象。我的循环有问题吗？我还应该显示如何将数据推送到对象中的代码吗？感谢您的帮助。

好的，所以selected，一个数组，包含多个对象。我将编辑我的答案以显示您的循环应该如何显示并解释为什么不使用for...in。

【参考方案2】：

我了解到您可能正在这里寻找原始的 Javascript 答案。 但是如果你可以使用RamdaJS库来解决这些问题，可以节省很多代码。

它有一组出色的函数，例如 pluck，它们可以在 1 行中完成相同的操作。

let array = R.pluck('id')(this.selected);