typescript - Vue.js 3 Composition API vs. Options API

Kan noen forklare hvorfor dette ikke fungerer med script-setup, men uten det fungerer.
I malen bruker jeg v-for for å iterere gjennom 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>

Kode med <script lang="ts">:
Fungerer, v-for finner elementene og jeg ser radene.

<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>

Skript med <script setup lang="ts">:
Fungerer ikke, jeg ser ingen rader fordi v-for ser ikke ut til å finne elementene, men dataobjektet er ikke tomt.

<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>

SpråkOversatt er dette grensesnittet:

export interface LanguagesTranslated {
    translatedLanguages: string[];
}

Svar #1

Ditt første eksempel bruker Options API. Når du bruker Options API, blir egenskapene i objektet som returneres av data() gjort reaktive automatisk.

Funksjonen setup() og <script setup> er de to måtene å bruke Composition API på. Når du bruker Composition API, oppfører koden din seg mer som vanlig JavaScript. For å opprette en reaktiv variabel må du eksplisitt opprette den ved å bruke en av funksjonene i Reaktivitet API: ref(), reactive(), eller computed().

Siden eksemplet ditt med <script setup> oppretter en vanlig variabel, er den ikke reaktiv, og v-for evalueres ikke på nytt når du tildeler den på nytt.

Prøv dette:

<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>

Relaterte artikler