I could really use some assistance with @Model and @Emit decorators. I'm attempting to alter the order on click within my component, and I referred to the documentation found here: https://github.com/kaorun343/vue-property-decorator. Below is the code snippet:
<template>
<button @click="onSortClick">Sort</button>
</template>
<script lang="ts">
import Vue from "vue";
import { Emit, Component, 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>
After clicking the button, however, the value of the "order" variable does not seem to change. Any insights into what might be going wrong?