我有一个组件,通过传入的组件prop提供初始数据属性,并存储在数据变量中:

<component :propvar="true"></component>

data() {
  return {
    localvar: this.propvar,
    localvar2: true
  }
}

我希望在用如下方法点击"重置"按钮时,能够将数据变量恢复为该props 的值:

methods: {
  reset() {
    Object.assign(this.$data, this.$options.data());
  }
}

问题在于,通过this.options.data()引用props 值时,数据变量为undefined:

console.log(this.$options.data()); => Object {localvar: undefined, localvar2: true}

Example Fiddle

推荐答案

如果确实需要通过再次触发data()方法重置所有数据属性,可以这样做:

methods: {
  reset() {
    Object.assign(this.$data, this.$options.data.call(this));
  }
}

this.$options.data中的this变量引用的是选项,而不是vue组件实例.这就是为什么localvar号房产是undefined号.因此,如果您是从vue实例调用它,则需要通过函数的call() method向它提供this的引用.


但是,在大多数情况下,我会直接赋值,而不是调用Object.assign:

methods: {
  reset() {
    this.localvar = this.propvar;
  }
}

Vue.js相关问答推荐

VueJS不会呈现一个名为None的组件""

Vue3组合-如何在组件卸载时注销回调

写入计算值时出错,但我没有写入任何值

如何在 vue2.7 中删除 slot-scope

vue router/:param 斜杠的参数

拖入 vue2-google-map 后如何获取标记位置?

Webpack - MiniCssExtractPlugin 不提取文件

如何解决 Vue.js 中的相邻 JSX 元素必须包含在封闭标记中问题

为什么 Vue 路由/Webpack 开发服务器现在在页面刷新时显示无法获取/路径?

如何将 mapActions 与 vue + Typescript 类组件一起使用?

从 Url 中删除查询字符串参数

如何让 Vue (vue cli 3) 正确处理 GraphQL 文件?

Vuex - 何时从 http 服务器加载/初始化存储数据

Vue:如何在按钮单击时调用 .focus()

何时使用

Vue js在列表中添加动态字段,删除和排序不起作用

在 Vuejs 中放置 firebase.auth().onAuthStateChanged() 的位置

我们可以像在 Angular 中一样创建 Vue.js 组件时将 HTML、JS 和 CSS 文件分开吗?

Vuex 模块Mutations

在 vue.js 应用程序中将静态内容(例如国家代码)存储在哪里?