Vue js v-for not working

У меня есть приложение Vue js. Я получаю список с помощью AJAX:Vue js v-for not working

$.ajax({ 
    method: 'POST', 
    dataType: 'json', 
    url: this.base_info.url + 'getavailability?token=' + this.token, 
    data: this.search_info, 
    success: function (list) { 
     this.results = list; 
     console.log(list); 
    }.bind(this) 
});

И вот результат:

{ 
    "success": "true", 
    "error": "false", 
    "items": [ 
    { 
     "relation_id": "9961", 
     "recommendation_id": "1", 
     "combination_id": "3", 
     "total_fare": "5530000", 
     "quantity_adult": "1", 
     "totalfare_adult": "5,530,000", 
     "quantity_child": "0", 
     "totalfare_child": "0", 
     "quantity_infant": "0", 
     "totalfare_infant": "0", 
     "airlines_name": "Qatar Airways", 
     "airline_logo": "QR" 
    }, 
    { 
     "relation_id": "9962", 
     "recommendation_id": "1", 
     "combination_id": "4", 
     "total_fare": "5530000", 
     "quantity_adult": "1", 
     "totalfare_adult": "5,530,000", 
     "quantity_child": "0", 
     "totalfare_child": "0", 
     "quantity_infant": "0", 
     "totalfare_infant": "0", 
     "airlines_name": "Qatar Airways", 
     "airline_logo": "QR" 
    }, 
    ] 
}

Когда я Переберите результат через Вю JS, он выводит и пустую строку в моей таблице.

<div v-for="item in results.items"> 
    <span class="big db">{{item.total_fare}}</span> 
</div>

Я не знаю, в какой части проблемы.

источник

2016-01-30 Sohrab Taee

console.log делает вернуть результат, который вы опубликовали? Вы пробовали назначать элементы как отдельную переменную (это, очевидно, не решение, а мы что-то ищем)? Вы пробовали предопределять объект без каких-либо запросов AJAX?Сделай это. – Andrius

Да, консольный журнал возвращает результаты, но новые поля не заданы заранее. –

В обработчике успеха присоединять элементы как

this.$set('results.items', list);

Это может заставить цикл дайджеста и в случае, если results.items не было первоначально заявленным в ваших данных, они будут оценены.

источник

2016-01-30 10:16:02

Вам не нужно использовать '$ set', если данные не инициализируются должным образом, каким оно должно быть. Если он установлен правильно, это будет работать. This.results.items = list'. Я определенно предлагаю правильно инициализировать данные над '$ set'. –

Прежде всего, убедитесь, что «результаты» определены в разделе данных вашего экземпляра Vue, и вам также необходимо убедиться, что этот «результат» имеет тот же тип данных, что и данные, возвращаемые «списком» ».

Во-вторых, я думаю, что лучше, чтобы утешать войти «this.results» вместо «списка», так как его «this.results» вы Перебор и не «список»

источник

2016-10-11 11:56:45 Jayish

Я думаю, это потому, что у вас есть дополнительно, после последней записи

{ 
    "relation_id": "9962", 
    "recommendation_id": "1", 
    "combination_id": "4", 
    "total_fare": "5530000", 
    "quantity_adult": "1", 
    "totalfare_adult": "5,530,000", 
    "quantity_child": "0", 
    "totalfare_child": "0", 
    "quantity_infant": "0", 
    "totalfare_infant": "0", 
    "airlines_name": "Qatar Airways", 
    "airline_logo": "QR" 
},

]

что приводит к пустой строке

источник

2016-12-03 10:16:02 user2056154

проблема у вас есть то, что это в пределах вашего АЯКС enclosur e не соответствует вашему экземпляру Vue js. Для решения проблемы вы можете сделать следующее непосредственно перед Ajax вызова, присвоить этот переменную

var vm = this; 

    $.ajax({ 
    method: 'POST', 
    dataType: 'json', 
    url: this.base_info.url + 'getavailability?token=' + this.token, 

    data: this.search_info, 
    success: function (list) { 
     const json = JSON.parse(list) as DataType_Of_Results; 
     vm.results = json; 
    } 
});

Примечания:

Определить класс, который инкапсулирует свойства возвращаются

class result{ 
    relation_id: string, 
    recommendation_id: string, 
    combination_id: string, 
    total_fare: string, 
    quantity_adult: string, 
    totalfare_adult: string, 
    quantity_child: string, 
    totalfare_child: string, 
    quantity_infant: string, 
    totalfare_infant: string, 
    airlines_name: string, 
    airline_logo: string 

    }

В разделе данных о вас Vue In Позиция

data:{ 
    result: new Array<result>() 
    }, 
    method:{ 
     getresult: function(){ 


    var vm = this; 

    $.ajax({ 
    method: 'POST', 
    dataType: 'json', 
    url: this.base_info.url + 'getavailability?token=' + this.token, 

    data: this.search_info, 
    success: function (list) { 
     const jsonResult = JSON.parse(list) as Array<result>; 
     vm.results = jsonResult; 
    } 
     } 
    }

источник

2017-02-24 09:57:50

"this" в вашем успехе обратного вызова не относится к вю Instance, это относится к JQuery. вы должны сделать

var vueInstance = this; 
    $.ajax({ 
    method: 'POST', 
    dataType: 'json', 
    url: this.base_info.url + 'getavailability?token=' + this.token, 
    data: this.search_info, 
    success: function (list) { 
     vueInstance.results = list; 
    } 
});

источник

2017-02-24 10:19:49

вы должны выполнить запрос Ajax при установке компонента, для этого используйте функцию created() {ajax ...} или mounted() {ajax ...} данные будут перед началом v-for в div

источник

2017-11-21 23:39:32

Vue js v-for not working

ответ

Смежные вопросы