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

Question

我不得不说，我是整个 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
    });
  },
}    

Answer 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);
});

Answer 2

我知道您可能在这里寻找普通的 Javascript 答案。 但是，如果您可以使用RamdaJS库来解决此类问题，则可以节省大量代码。

它有一组很棒的函数，比如pluck ，它们可以在 1 行中做同样的事情。

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