如何將來自對象的特定鍵的值存儲到數組中 - 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);