В моем компоненте Vue. js есть простой API-запрос axe ios, который помещается в mount (). На самом деле это единственная вещь в этом жизненном цикле.
Внутри beforeUpdate () я запускаю метод, который сортирует содержимое результатов API. Это также единственное, что происходит в этом жизненном цикле.
Все сработало. Я побежал npm запустить подачу и видел правильные результаты своими глазами.
Итак - я начал свой код и начал работать над методом, который никоим образом не связан с упомянутым кодом. Сохранил его, и сервер обновился, и я зашел в свой браузер и обнаружил, что исходный код дал сбой, а результаты API исчезли.
Я удалил свои изменения в методе, даже если он не был связан, и снова сохранил. Не исправить. Результаты API все еще пропали. Таким образом, я удалил весь метод, но без средств защиты.
Поиск mount () и метод, который когда-то работал, все еще остаются без изменений.
Я работал над этой проблемой весь день. Иногда я получаю правильные результаты обратно - фактически не понимая, что я сделал - но потом, когда я меняю что-то другое - они снова исчезают.
Честно говоря, я не думаю, что с моим кодом что-то не так, и я не получаю никаких сообщений об ошибках. Что еще может быть причиной этого?
РЕДАКТИРОВАТЬ: Удалено отображение пакета. json - так как не имеет значения.
<script>
import axios from 'axios';
import moment from 'moment';
moment.locale('nb');
export default {
name: 'Regobs',
data: function() {
return {
info: null,
sortert: [],
authors: [],
authorsUnike: [],
test: null,
};
},
methods: {
rettTid(dato) {
var a = moment(dato).format('L');
var b = moment(dato).format('LT');
var c = a + " " + b;
return c
},
sortering() {
this.test = "sortering";
var i = 0;
while(i < 10 ){
// Hvis istykkelse ikke er registrert, ta den bort
var istykkelse
var iskommentar
if (this.info[i].IceThickness == null || this.info[i].IceThickness.Comment == null) {
istykkelse = 0;
iskommentar = "";
} else {
istykkelse = this.info[i].IceThickness.IceThicknessSum;
iskommentar = this.info[i].IceThickness.Comment;
}
// Hvis IceCoverObs ikke finnes
var iscover
var iscoverobs
if (this.info[i].IceCoverObs == null) {
iscoverobs = "";
iscover = "";
} else {
iscover = this.info[i].IceCoverObs.IceCoverName;
iscoverobs = this.info[i].IceCoverObs.IceCapacityName;
}
this.sortert.push( [
{ 'LocationName': this.info[i].ObsLocation.LocationName },
{ 'DtObsTime': this.rettTid(this.info[i].DtObsTime) },
{ 'IceThicknessSum': istykkelse },
{ 'IceCoverName': iscover },
{ 'IceCapacityName': iscoverobs },
{ 'IceThicknessComment': iskommentar },
{ 'Latitude': this.info[i].ObsLocation.Latitude },
{ 'Longitude': this.info[i].ObsLocation.Longitude },
{ 'ObsLocationID': this.info[i].ObsLocation.ObsLocationID }
] )
this.authors.push( this.info[i].Observer.ObserverName )
i++;
}
return this.sortert
},
},
mounted () {
axios
.post('https://api.regobs.no/v4/Search', {'NumberOfRecords': '10', 'SelectedGeoHazards': '[70]', 'Extent': { 'TopLeft': { 'Latitude': '60.14', 'Longitude': '10.21' }, 'BottomRight': { 'Latitude': '60.04', 'Longitude': '10.35' }}}, { headers: {'Content-Type': 'text/json'}})
.then(response => (this.info = response.data ));
},
beforeUpdate () {
this.sortering();
},
filters: {
rundAv: function(value) {
if(!value) {
value = 0;
}
value = Math.round(value * Math.pow(10, 2)) / Math.pow(10, 2);
return value;
},
meterTilCm: function(value) {
var a = value * 100;
var b = a + " cm";
return b;
}
},
}
</script>
РЕДАКТИРОВАТЬ: Таким образом, я изменил код в соответствии с @T . Короткий ответ - и удалил все до обновления. Это хорошо работало на localhost, но компонент зависал при развертывании на netlify. Консоль также начала показывать ошибку:
[Vuew warn] You may have an infinite update loop in a component render function.
Я также попытался немного уточнить код mount ():
mounted () {
this.pending = true;
axios
.post('https://api.regobs.no/v4/Search', {'NumberOfRecords': '10', 'SelectedGeoHazards': '[70]', 'Extent': { 'TopLeft': { 'Latitude': '60.14', 'Longitude': '10.21' }, 'BottomRight': { 'Latitude': '60.04', 'Longitude': '10.35' }}}, { headers: {'Content-Type': 'text/json'}})
.then(response => { this.info = response.data })
.catch(error => {this.error = error })
.finally( function() {
this.sortering()
this.pending = false });
}
Но все равно не радость. На самом деле, Vue DevTools показывает, что ожидание всегда актуально - и это тоже немного странно (для меня). API используется, но мой метод () (сортировка) не происходит ...