时间戳

首页 > 解决方案 > 无法设置未定义的vuejs 3的属性

vue.js - 无法设置未定义的vuejs 3的属性

问题描述

在我的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

标签： vue.jsvuejs3

解决方案

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

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

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

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

如果要更改codes，可以在setupor中定义一个函数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>

推荐阅读