Question

我正在尝试更改计算属性中的数据值，但是如果我使用map对其进行更改，那么data属性中的原始值也会更改。

我阅读了有关计算属性的文档，并且它不会更改原始值。

我阅读了有关map的文档，它返回了包含更改的新对象。

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  computed: {
    todos_computed() {
        return this.todos.map((todo) => {
        todo.text += ' - Changed'
        return todo
        })
    },
  },
})

jsfiddle：https://jsfiddle.net/hkqm6f30/1

Answer 1

实际上，当您执行todo.text += ' - Changed'时，您对实际对象进行了突变。

您应该做的是首先对对象数组进行深层复制，然后对该副本进行变异。

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  computed: {
    todos_computed() {
        const todos = JSON.parse(JSON.stringify(this.todos))
        return todos.map((todo) => {
        todo.text += ' - Changed'
        return todo
        })
    },
  },
})

看到这样的答案：https://stackoverflow.com/a/10869248/3956205

Answer 2

返回一个用于对旧对象进行变异的新对象。

new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  computed: {
    todos_computed() {
        return this.todos.map((todo) => {
        return { text: todo.text + ' - Changed', done: todo.done }
        })
    },
  },
})

在计算属性内使用映射时发生意外行为

2 个答案: