Vue.js 为什么我的数组值被清除了？

Question

我正在尝试将对象数组推送到答案数组中。我已经使用 forEach() 在推送后清除每个值属性，但是 answers 数组中的值属性也被清除了。为什么要这样做？

我什至尝试过使用 .map() 克隆数组，但它做的事情完全一样。我哪里错了？提前致谢。

new Vue({
  el: '#app',
  data() {
    return {
      elements: [{
          title: "Type",
          interfaceKey: "SpecifiedItemType",
          component: "Input",
          value: "", // typed text
        },
        {
          title: "Desc",
          interfaceKey: "SpecifiedItemDescription",
          component: "Input",
          value: "", // typed text
        },
        {
          title: "Value",
          interfaceKey: "SpecifiedItemValue",
          component: "Input",
          value: "", // typed text
        },
      ],
      answers: [],
    };
  },
  methods: {
    reset() {
      const newArray = this.elements.map((item) => item);

      this.answers.push(newArray);

      this.elements.forEach((item) => (item.value = ""));
    },
  },
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <template v-for=" (e, index) in elements ">
          <div :key="index ">
            <input type="text " v-model="elements[index].value " />
          </div>
        </template>
  <button @click="reset ">reset</button>
  <div>
    {{ answers }}
  </div>
</div>

Answer 1

您缺少的是对对象进行深度复制，否则它将链接到输入值。

new Vue({
      el: '#app',
      data() {
        return {
          elements: [{
              title: "Type",
              interfaceKey: "SpecifiedItemType",
              component: "Input",
              value: "", // typed text
            },
            {
              title: "Desc",
              interfaceKey: "SpecifiedItemDescription",
              component: "Input",
              value: "", // typed text
            },
            {
              title: "Value",
              interfaceKey: "SpecifiedItemValue",
              component: "Input",
              value: "", // typed text
            },
          ],
          answers: [],
        };
      },
      methods: {
        reset() {
        const newArray = []
          this.elements.forEach(elem => {
            newArray.push({...elem});
            elem.value = ''
          })
          this.answers.push(newArray)
        },
      },
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <template v-for="(e, index) in elements">
      <div :key="index">
        <input type="text" v-model="elements[index].value" />
      </div>
    </template>
  <button @click="reset">reset</button>
  <div>
    {{ answers }}
  </div>
</div>

Answer 2

通过使用 .map() 函数，您可以进行浅表复制。新数组仍然引用原始数组。要制作没有任何参考的副本，您可以使用以下代码：

const newArray = JSON.parse(JSON.stringify(this.answers));

Vue.js 为什么我的数组值被清除了？

Vue.js why is my array values being cleared?

vue.js