Question

无法设置未定义的 vuejs 3 属性

2021-06-30

1423

vue.js vuejs3

在我的 Something.vue 中：

<template>
<p>{{ codes }}</p>
</template>

export default {
  data() {
    return {
      codes: 'test'
    }
  },
  name: 'Functions',
  props: {
    msg: String
  },
  setup() {
  this.codes = 'does it work?';
}
</script>

<style>
</style>

为什么我会遇到这个问题？

Uncaught TypeError: Cannot set property 'codes' of undefined

Answer 1

在 vue3 中，你可以像这样定义变量：

import { ref } from "vue";
export default {
  name: 'Functions',
  props: {
    msg: String
  },
  setup() {
    let codes = ref('does it work?');
    
    return { codes }
  }
</script>

并且你可以在 Vue 组件中使用 codes 。

因为，在 setup 方法中，你不能使用 this 关键字。它的执行早于其他生命周期函数

如果你想改变 codes ，你可以在 setup 或 methods 中定义一个函数，如下所示：

setup() {
  let codes = ref("does it work?");

  function onChangeCodes() {
    codes.value = "changed!";
  }

  return { codes, onChangeCodes };
}

然后，你可以在模板中使用此函数：

<template>
  <div>{{ codes }}</div>
  <button @click="onChangeCodes">change</button>
</template>

Answer 2

执行 setup 时，组件实例尚未创建，换句话说，执行 setup() 时您无法访问“代码”。您可以在此处

查看文档