如何使用Vue组件$ set在单个文件组件中设置对象

Question

跟随Vue.js教程，我在https://vuejs.org/v2/guide/list.html#Object-Change-Detection-Caveats中阅读了此部分：

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
// It was stated in the tutorial that, the below will add to userProfile
// while making sure userProfile still being reactive
vm.$set(vm.userProfile, 'age', 27)

很好，想尝试一下vm.$set功能。

但是，我的实现是在单个文件组件中，例如像这样的东西：

<script>
export default {
  name: 'Test',
  data() {
    return {
        userProfile: {
          name: 'Anika'
        }
    };
  }
}
</script>

我将如何检索上面的[[vm变量？我已经尝试了以下代码，但无法正常工作……出现错误：

vm。$ set不是函数

<script>
let vm = {
  name: 'Test',
  data() {
    return {
       userProfile: {
         name: 'Anika'
       }
    };
  }
}
vm.$set(vm.userProfile, 'age', 27)

export default vm;
</script>

Answer 1

如果您在组件的上下文中使用它，则只是

this.$set(this.userProfile,....)