Nuxt TypeScript：无法分配给“名称”，因为它是只读属性

Question

<template lang="pug">
.bd-solid.bdw-1.bdc-teal.p-10.m-10.ta-c
        h4.fs-32 📜
        p.mt-10 > {{name}}
        p.mt-10 > {{reverse()}}
        button.fs-24.p-5.mt-10(@click='change') 💱
</template>

<script lang="ts">
import Vue from "vue"
export default Vue.extend({
    props: {
        name: {
            type: String,
            default: 'abcd'
        }
    },
    methods: {
        reverse() {
            return this.name.split('').reverse().join('');
        },
        change() {
            this.name = 'aaa';
        }
    },
})
</script>

如何摆脱这个错误？

• 我使用 Nuxt、TypeScript、帕格、Sass。
• 我是 Nuxt 的新手，有些语法和 function 我可能不习惯。

TS2540: Cannot assign to 'name' because it is a read-only property.
    56 |                },
    57 |                change() {
  > 58 |                        this.name = 'aaa';
       |                             ^^^^
    59 |                }
    60 |        },
    61 |

这段代码以及细节，stackoverflow 期望的代码比它们的自动检测功能的细节更多吗？

Answer 1

我认为在组件内更改 prop Name 是个坏主意，您可能应该在使用该组件的另一个组件内更改它