如何將新列添加到vue中的字典數組

Question

我已經定義了以下獲取方法，以從數據庫中獲取記錄。 但我想為每條記錄添加一列，僅用於前端實現。 請幫我解決這個問題。

<script>
  export default {
    components: {
    },
    data: function() {
      return {
        versions: [],
      };
    },
    created: function() {
      this.fetchVersions();
    },
    methods: {     
      fetchVersions() {
        var that = this;
        var url = '/area/versions.json';

        this.$axios.get(url)
        .then(response => {
          that.versions = response.data;
        })
      },

    }
  };
</script>

現在版本數組看起來像這樣：

versions: [
  {    
    name: 'Version 1',
    region: 'CBA 09',
  },
  {
    name: 'Version 2',
    region: 'CBA 11',
  }
]

我想在每條記錄的開頭添加一個具有相同值的新列，如下所示：

versions: [
  {  
    manager: '0024',
    name: 'Version 1',
    region: 'CBA 09',
  },
  {
    manager: '0024',
    name: 'Version 2',
    region: 'CBA 11',
  }
]

Answer 1

您可以使用map和解構賦值（ ... ）：

this.versions = response.data.map(v => ({...v, manager: '0024'}));

並且不需要that因為箭頭函數封裝了父 scope。

演示：

 const versions = [ { name: 'Version 1', region: 'CBA 09' }, { name: 'Version 2', region: 'CBA 11' } ]; console.log( versions.map(v => ({...v, manager: '0024'})) );