Question

在vuecli中我有这样的数据

data() {
        return {
            options: [{
                values: ['a', 'b', 'c']
            }],
            variants: [],
            p: {            
               option_1: null 
            }
        }
    }

当我在一个看起来像这个

的方法中运行循环时

methods: {
  add() {
    for(let i = 0; i < this.options[0].values.length; i++) {

        (function(i, p){
            var raw = p;
            raw.option_1 = this.options[0].values[i]; 
            this.variants.push(raw); 
        })(i, this.p);

    } 
  }
}

我尝试过很多方法，但只有当我在raw循环中设置var raw = {option_1: null}的值时才会成功。

但这不是我想要的。我想从data获取值并在循环中使用它来生成

variants: [{ option_1: 'a' }, { option_1: 'b' }, { option_1: 'c' }]

我怎样才能做到这一点？

Answer 1

您需要raw的副本，因为raw中的variants只是指向同一对象的引用。这就是为什么你有三个相同的价值。

add() {
  let self = this
  for (let i = 0; i < self.options[0].values.length; i++) {
    (function (i, p) {
      var raw = p;
      raw.option_1 = self.options[0].values[i];
      self.variants.push(JSON.parse(JSON.stringify(raw)));
    })(i, self.p);
  }
  // this.options[0].values.forEach(v => {
  //     this.variants.push({ option_1: v })
  // })
}

评论中的代码是一种更优雅的方式。

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app">
  <mytag></mytag>
</div>
<script>
  let mytag = Vue.component("mytag", {
    template: `<div><button @click="add">add</button><p>this.variants:{{this.variants}}</p></div>`,
    data() {
      return {
        options: [{
          values: ["a", "b", "c"]
        }],
        variants: [],
        p: {
          option_1: null
        }
      };
    },
    methods: {
      add() {
        let self = this
        for (let i = 0; i < self.options[0].values.length; i++) {
          (function(i, p) {
            var raw = p;
            raw.option_1 = self.options[0].values[i];
            self.variants.push(Object.assign({}, raw));
            //self.variants.push(JSON.parse(JSON.stringify(raw)));
          })(i, self.p);
        }
        // this.options[0].values.forEach(v => {
        //     this.variants.push({ option_1: v })
        // })
      }
    }
  });
  new Vue({
    el: '#app',
    components: {
      mytag
    }
  })
</script>

＆＃13;

最后，你最好先了解一下如何提问！

Answer 2

如果您希望最终结果看起来像

variants: [{
  option_1: 'a'
}, {
  option_1: 'b'
}, {
  option_1: 'c'
}]

每个条目都由p模板化，option_1设置为每个values条目，您可以使用

this.variants = this.options[0].values.map(option_1 => ({...this.p, option_1 }))

这会将值映射到具有键option_1的对象数组以及每个值项的值。

如果您想在每次致电add()时添加3个对象，请将其更改为使用Array.prototype.concat()

this.variants = this.variants.concat(
    this.options[0].values.map(option_1 => ({...this.p, option_1 })))

vuejs for循环总是返回最后一个值

2 个答案: