Почему вычисляемое свойство,полученное из Промиса, выдает [object Promise] на самой странице, хотя в консоли 14 (как и должно быть):
<div id="content">
<div v-if="allNewsList">{{allNewsList}}</li>
</div>
<script>
const app = new Vue({
el: '#content',
computed: {
async allNewsList() {
let data = await axios.get('http://news/filtered_news/author_all/period_all').then(response => {return response.data});
console.log(data.length);
return data.length;
},
}
});
Все верно по поводу asyncСomputed, а вот как вариант если сделать просто по create.
new Vue({
el: '#content',
data: {
allNewsList: null
},
created() {
this.$http.get('https://api.coindesk.com/v1/bpi/currentprice.json')
.then(function(response) {
if (response.status == "200") {
this.allNewsList = response.headers.map['content-length'][0];
}
})
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-resource@1.3.4"></script>
<div id="content">
<div v-if="allNewsList">{{ allNewsList }}</div>
</div>
Сами по себе св-ва в computed
будут вызваться как обычные функции. Грубо говоря
const app = new Vue({
el: '#content',
computed: {
async data() {
let data = await asyncOperation();
return data.length;
},
}
});
// Где-то в коде vue будет вызвано просто
computed.data();
// next code...
Становится понятно, что никто не дожидается выполнения асинхронной функции, поэтому она и возвращает Promise<value>
, которое используется, как значение.
хотя в консоли 14 (как и должно быть):
Потому уже внутри функции вы дожидаетесь выполнения асинхронной функции. А значит и вернет она уже значение, а не Promise
Что делать? Использовать плагин: vue-async-computed
Вот пример из документации:
new Vue({
data: {
userId: 1
},
asyncComputed: {
username () {
return Vue.http.get('/get-username-by-id/' + this.userId)
.then(response => response.data.username)
}
}
}
Кофе для программистов: как напиток влияет на продуктивность кодеров?
Рекламные вывески: как привлечь внимание и увеличить продажи
Стратегії та тренди в SMM - Технології, що формують майбутнє сьогодні
Выделенный сервер, что это, для чего нужен и какие характеристики важны?
Современные решения для бизнеса: как облачные и виртуальные технологии меняют рынок
Есть всплывающая форма, когда нажимаю на кнопку то форма не открывается, ранее убирал hidden, после форма отображалась корректно, но перестала...
Напрямую, через присвоение переменную передать не получитсяC php в js - можно, например, так: let var = '<?= $str ?>', но вот в обратную сторону этот фокус...
Сделал адаптивность пользуясь инструментами хром , то есть отображал сайт как будто на мобильном устройстве Сделал адаптивность для каждого...