Question

简单地说，我只想更改Vue对象的整个数据，如下所示：

vueobj.$data = newdata;

但是官方文件说它不被允许：

VM156 vue.js：597 [Vue警告]：避免替换实例根$ data。使用   而是嵌套数据属性。

（找到）

所以我尝试了另一种方法：首先通过$destroy()销毁vueobj，然后创建一个新的vueobj以将新数据对象绑定到相同的UI元素，但之后，UI元素仍然使用旧数据。那么我怎么能解决这个问题呢？谢谢！

Answer 1

这很棘手，但你可以遍历数据属性并且：

首先：删除所有data属性;
第二步：将newdata对象的每个属性添加到data对象。

演示如下：

new Vue({
  el: '#app',
  data: {
    name: 'Alice',
    age: 30
  },
  methods: {
    changeWholeData() {
    	 let newdata = {name: 'Bob', age: 40};
       // erase all current keys from data
       Object.keys(this.$data).forEach(key => this.$data[key] = null);
       // set all properties from newdata into data
       Object.entries(newdata).forEach(entry => Vue.set(this.$data, entry[0], entry[1]));
    }
  }
})

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>Name: {{ name }}</p>
  <p>Age: {{ age }}</p>
  <button @click="changeWholeData">Change Whole Data</button>
</div>

Answer 2

我认为你不能改变整个数据对象。再次摧毁和创造似乎也不对。但是您可以将数据1中的值更改为1。

e.g。 https://codepen.io/jacobgoh101/pen/geXgVX?editors=1010

const vueApp = new Vue({
  el: '#app',
  data: {
    number: 1
  }
});

您可以在Vue实例外执行number来更改vueApp.number = //...。

希望这实际上就是你所要求的。

Answer 3

如前所述，您需要使用一个嵌套属性来包装要替换的数据，因此只需进行一些预先计划即可。

如果您这样创建Vue实例，

var vueobj = new Vue({
  el: '#app',
  data: {
    dataSource: {
        name: 'Alice',
        age: 30
    }
  }
})

然后您可以像这样替换数据

vueobj.dataSource = newdata;

dataSource包装器属性可以是任何有效的属性名称。缺点是您无法再直接在Vue实例上访问内部属性。例如。您必须使用vueobj.dataSource.name而不是vueobj.name，但是我想这是Vue提供的所有其他易用性的折衷方案。您可以创建一个name计算出来的情况来解决此问题，但是如果有很多根属性，这样做将很繁琐。

Answer 4

这对我有用：

<div id="app">
  {{name}}: {{age}}
</div>

const app = new Vue({
  el: "#app",
  data: {
    name: "Alice",
    age: 30
  },
  methods: {
    refresh(data) {
      Object.assign(this.$data, data); // <--
    }
  }
});

const newData = {
  name: "Bob",
  age: 22
};

app.refresh(newData);

如何更改vue对象的整个数据？

4 个答案: