Vue.js如何将主模型数据赋值到内部对象中？

你的代码存在两个核心问题：

1. 在data的对象字面量中重复定义了currentCard属性，后定义的会覆盖前一个，但更关键的是此时this并不指向Vue实例，所以this.name无法获取到预期值；
2. 直接在data对象中引用同级属性不生效，因为Vue实例还未完成初始化。

下面提供几种可行的解决方案：

方法1：使用data的函数形式（推荐） #

Vue2中，data可以写成函数形式（组件开发中必须使用函数），在函数内部先定义变量，再构建返回对象，就能直接引用到目标属性：

new Vue({
  el: "#app",
  data() {
    const name = "Bobby";
    return {
      name,
      currentCard: {
        author: name
      }
    };
  }
});

方法2：在created钩子中赋值 #

利用Vue的created生命周期钩子，此时实例已初始化完成，this能正确访问到data中的属性，再完成赋值：

new Vue({
  el: "#app",
  data: {
    name: "Bobby",
    currentCard: {}
  },
  created() {
    this.currentCard.author = this.name;
  }
});

方法3：使用计算属性（支持响应式同步） #

如果后续name的值会变化，希望currentCard.author自动同步更新，可以用计算属性替代：

new Vue({
  el: "#app",
  data: {
    name: "Bobby"
  },
  computed: {
    currentCard() {
      return {
        author: this.name
      };
    }
  }
});

模板中依然可以通过{{currentCard.author}}访问，且name变化时会自动更新。

另外注意：你原代码里methods部分存在语法错误，缺少闭合的}和)，需要修正才能正常运行。

内容的提问来源于stack exchange，提问作者Vzupo