4

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[];
}
4
  • Thanks @jackssrt, I know the documentation. Jan 19 at 19:06
  • With script setup, unlike the option api, variables are not reactive by default. You have to use ref or reactive wrappers to make it reactive, so your template can react to their changes.
    – Kapcash
    Jan 19 at 19:20
  • You are not asking about <script setup> specifically, but the Composition API vs the Options API. Could you please edit your question? Jan 19 at 19:47

1 Answer 1

5

Your first example is using the Options API. When using the Options API, properties in the object returned by data() are made reactive automatically.

The setup() function and <script setup> are the two ways of using the Composition API. When using the Composition API, your acts more like normal JavaScript. To create a reactive variable, you have to explicitly create it using one of the Reactivity API functions: ref(), reactive(), or computed().

As your example with <script setup> is creating a plain variable, it is not reactive and the v-for does not re-evaluate when you reassign it.

Try this:

<script setup lang="ts">
import axios, { isCancel, AxiosError } from 'axios';
import { ref, onMounted } from 'vue';
import type { LanguagesTranslated } from './main';

// Use `ref` here to create a Ref.
const data = ref<LanguagesTranslated>({ translatedLanguages: [] });

onMounted(() => {
    axios
        .get("https://translation.colreminder.com/test/data.php?request=langTranslated")
        .then(response => {
            console.log(response.request.response);
            // Use `data.value`, as `data` is a Ref.
            data.value = JSON.parse(response.request.response);
            console.log(data.value.translatedLanguages);
        });
});
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.