有人能解释一下为什么这不工作与脚本设置，但没有它的工作。
在模板中，我使用v-for迭代字符串[]：
<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>带有<script lang="ts">的代码：v-for找到了元素，我看到了行。
<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 setup lang="ts">的脚本：
不工作，我没有看到任何行，因为v-for似乎没有找到元素，但数据对象不是空的。
<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是此接口：
export interface LanguagesTranslated {
translatedLanguages: string[];
}
1条答案
按热度按时间enyaitl31#
第一个例子是使用Options API，当使用Options API时，由
data()返回的对象中的属性会自动变为React式。setup()函数和<script setup>是使用组合API的两种方式。使用组合API时，您的行为更像普通JavaScript。要创建React变量，必须使用其中一个ReactAPI函数显式创建它：ref()、reactive()或computed()中的任意一个。因为您的
<script setup>示例创建了一个普通变量，所以它不是被动的，并且当您重新分配v-for时，它不会重新求值。试试这个：