I am currently working on a project using Vue.js and TypeScript, but I am facing an issue with 'vue-property-decorator'. I have two code snippets that are supposed to achieve the same result, but only one is working. Can someone please help me identify the mistake I have made?
Here is the code that works:
<script lang="ts">
import Vue from "vue";
import axios from "axios";
export default Vue.extend({
name: "DetailPage",
props: ["id"],
data() {
return {
profile: [{}] as Array<object>
};
},
methods: {
findProfile(id?: string) {
this.profile = [];
axios
.get("https://api.unsplash.com/photos/" + this.id, {
headers: {
Authorization: `Client-ID ${process.env.VUE_APP_MYVUE}`
}
})
.then(res => {
this.profile = res.data;
})
.catch(() => {
this.profile = [];
});
}
},
watch: {
$route(to: string, from: string) {
this.findProfile();
}
},
beforeMount() {
this.findProfile();
}
});
</script>
However, the code below using 'vue-property-decorator' does not work:
<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import axios from "axios";
export default class DetailPage extends Vue {
@Prop() readonly id!: string;
private profile: Array<object> = [];
findProfile(id?: string) {
const profile: Array<object> = []
axios
.get("https://api.unsplash.com/photos/"+ this.id , {
headers: {
Authorization: `Client-ID ${process.env.VUE_APP_MYVUE}`
}
})
.then(res => {
console.log(res.data);
});
}
@Watch("$route", { immediate: true, deep: true })
onUrlChange(to: any, from: any) {
this.findProfile();
}
beforeMount() {
this.findProfile();
}
}
</script>
Any assistance is greatly appreciated!