can anyone help me with decorators @Model and @Emit? I'm trying to change order on click in my component and used documentation from here: https://github.com/kaorun343/vue-property-decorator. Here is my code:
<template>
<button @click="onSortClick">Sort</button>
</template>
<script lang="ts">
import Vue from "vue";
import { Emit, Componet, Model } from "vue-property-decorator";
export default class MyButton extends Vue {
@Model("sort", { type: String, default: "none" }) readonly order!: string;
@Emit("sort")
onSortClick() {
const nextSortOrder = {
ascending: "descending",
descending: "none",
none: "ascending"
};
return nextSortOrder[this.order];
}
}
</script>
But when I click the button, the value of variable "order" is not changing. Am I doing something wrong?
Yes, you are. There are a few things wrong here.
You need to import vue like this
import { Vue, Component, Model, Emit } from 'vue-property-decorator;
The class needs to have an
@Component
decorator like thisorder
because it is areadonly
property within the same file. If you place your button in another component like thisand listen to the emitted event as above then the order variable in the parent component will change but not the child.