Question

我需要将类型为object的数据变量分配给普通变量

const myVue = new Vue({
  el: '#myVue',
  data: {
    vars: {}, // show Form
  },
  methods: {
    assign_vars() {
      const new_vars = this.vars;
    },
  },
});

html

<input type="text"  v-model="vars.name" >

我需要new_vars才能这样：

new_vars: { name: 'test' }

但是发生的事情是new_vars具有Vue创建的所有属性

Answer 1

Vue将其观察到的数据包装在一个特殊的对象中，以有效地观察变化（这是启用反应性的原因）。在大多数情况下，您不需要解开对象，但是如果您这样做，可以使用以下两种方法：

const unwrapped = JSON.parse(JSON.stringify(this.vars));

这是Evan You here建议的方法。只要类型可以在JSON之间（字符串，数字，布尔值，对象和数组）进行转换，它甚至对于深度嵌套的对象也适用。如果您的数据包含其他内容（例如日期），则需要另一种方法。

const unwrapped = { ...this.vars }

这对于浅对象很有效，即使它们包含非基本体。

如果您有一个包含非原始值的深层嵌套对象，则需要编写一个递归解开其子对象的函数。

Answer 2

如果要保留功能，lodash.defaultsDeep({}, vm.$data)是个好主意。

如何将Vue包装的对象转换为普通对象

2 个答案: