Can someone explain why this does not work with script setup, but without it works.
In the template I use v-for
to iterate through the string[]:
<div v-for="lang in data.translatedLanguages" class="translationTableBodyRow">
<div class="translationTableBodyCell">xx</div>
<div class="translationTableBodyCell">{{ lang }}</div>
<div class="translationTableBodyCell">10 %</div>
<div class="translationTableBodyCell">Edit</div>
</div>
Code with <script lang="ts">
:
Working, the v-for
finds elements and I see the rows.
<script lang="ts">
import axios, {isCancel, AxiosError} from 'axios';
import { defineComponent } from 'vue'
export default defineComponent({
data() {
return {
data: { translatedLanguages: [] }
}
},
mounted() {
axios.get("https://translation.colreminder.com/test/data.php?request=langTranslated").then(response => {
console.log(response.request.response);
this.data = JSON.parse(response.request.response)
this.data.translatedLanguages
console.log(this.data.translatedLanguages);
});
}
});
</script>
Script with <script setup lang="ts">
:
Not working, I don't see any rows because v-for
seems does not find the elements, but the data object is not empty.
<script lang="ts">
import axios, {isCancel, AxiosError} from 'axios';
import { onMounted, reactive, VueElement } from 'vue';
import type { LanguagesTranslated } from './main';
var data: LanguagesTranslated = { translatedLanguages: [] };
onMounted(() => {
axios.get("https://translation.colreminder.com/test/data.php?request=langTranslated").then(response => {
console.log(response.request.response);
data = JSON.parse(response.request.response);
console.log(data.translatedLanguages);
});
});
</script>
LanguagesTranslated is this interface:
export interface LanguagesTranslated {
translatedLanguages: string[];
}
ref
orreactive
wrappers to make it reactive, so your template can react to their changes.<script setup>
specifically, but the Composition API vs the Options API. Could you please edit your question?