I'm quite new to typescript language, but eager to learn it.
I have a SPA-Wordpress project as a hobby on my hands, I'm coding in Vite (VueJS), and I can't figure out the right syntax form to go from dot notation to bracket.
<script lang="ts">
import axios from "axios";
import { ref } from "vue";
export default {
data() {
return {
postsUrl: "https://localhost/wordpress/wp-json/wp/v2/news",
queryOptions: {
per_page: 6, // Only retrieve the 6 most recent blog pages.
page: 1, // Current page of the collection.
_embed: true, //Response should include embedded resources.
},
// Returned Pages in an Array
pages: [],
isLoading: false;
};
},
methods: {
getPosts() {
const isLoading = ref(true);
axios
.get(this.postsUrl, { params: this.queryOptions })
.then((response) => {
this.pages = response.data;
console.log("Pages retrieved!");
console.log(this.pages);
isLoading.value = false;
})
.catch((error) => {
console.log(error);
});
},
},
mounted() {
this.getPosts();
},
};
</script>
<template>
<ul v-for="(page, index) in pages" :key="index">
<h1>{{ page['title']['rendered'] }}</h1>
<p>{{ page.excerpt.rendered.replace(/(<([^>]+)>)/ig, "") }}</p>
</template>
Typescript drops the following error on the simple dot notation:
Property 'excerpt' does not exist on type 'never'.ts(2339)
And it drops the following error If I use the brackets+parentheses:
<p>{{ page['excerpt']['rendered']['replace'](/(<([^>]+)>)/ig, "" ) }}</p>
This expression is not callable. Type 'never' has no call signatures.ts(2349)
and If I do it like the following, then typescript is fine with it, but the div doesnt show anything:
<p>{{ page['excerpt']['rendered']['replace(/(<([^>]+)>)/ig, "")'] }}</p>
The <h1> with the brackets, works perfectly, no errors from TS and it shows correctly on the website. Yet, If I were to use dot notation on the h1, it would throw the same error as with the <p> + dot notation.
<h1>{{ page['title']['rendered'] }}</h1>
Could you help me with this? Thanks in advance!
Tried just simply putting the replace function in square brackets with quotation marks, didn't work.
