Vue.js 3 API композиции и API опций
Может кто-нибудь объяснить, почему это не работает с настройкой скрипта, а без него работает.
В шаблоне я использую 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.info(response.request.response);
this.data = JSON.parse(response.request.response)
this.data.translatedLanguages
console.info(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.info(response.request.response);
data = JSON.parse(response.request.response);
console.info(data.translatedLanguages);
});
});
</script>
LanguagesTranslated это интерфейс:
export interface LanguagesTranslated {
translatedLanguages: string[];
}
Спасибо @jackssrt, я знаю документацию.
При настройке скрипта, в отличие от опции api, переменные по умолчанию не реактивны. Вы должны использовать обертки ref или reactive, чтобы сделать его реактивным, чтобы ваш шаблон мог реагировать на их изменения.
Вы спрашиваете не конкретно о <script setup>, а об API композиции и API опций. Не могли бы вы отредактировать свой вопрос?
Ответы 1
В вашем первом примере используется API параметров. При использовании API параметров свойства в объекте, возвращаемом data(), автоматически становятся реактивными.
Функция setup() и <script setup> — это два способа использования Composition API. При использовании Composition API ваши действия больше похожи на обычный JavaScript. Чтобы создать реактивную переменную, вы должны явно создать ее с помощью одной из функций API реактивности: ref(), reactive() или computed().
Поскольку ваш пример с <script setup> создает простую переменную, она не является реактивной, и v-for не переоценивается, когда вы ее переназначаете.
Попробуй это:
<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.info(response.request.response);
// Use `data.value`, as `data` is a Ref.
data.value = JSON.parse(response.request.response);
console.info(data.value.translatedLanguages);
});
});
</script>