Привет, у меня проблема с моим вычисленным свойством.
В первую очередь я получаю данные из моего ruby API рельсов, все идет хорошо, теперь я фильтрую эти данные на основе их id, я делаю это в своем вычисляемом свойстве, но если я консоль записываю его, он просто дает мне undefined, я не могу получить доступ, например, к filteredRecords[0].id, потому что он просто пуст, однако , я могу l oop через этот массив и дает мне правильные данные. Я думаю, что это связано со временем, я получаю данные в моем разделе created(){}, фильтрация тоже выполняется, но я просто не могу получить доступ к данным напрямую, вот когда мне нужна ваша помощь.
Вот как сейчас выглядит мой код (я выделяю важные моменты стрелкой):
<template>
<body>
<div
class="container uppercase text-xl font-mono pl-4 font-semibold no-underline text-indigo-dark hover:text-indigo-darker "
>
<table>
<tbody>
<tr class="priority-200 ">
<td id="writeDay" class="default ">{{ createdDate }}</td>
<td id="hour" class="default pl-16">
{{ createdHours }}
</td>
<td
id="degree"
class="defaulted white--text
"
v-show="filteredDatas && filteredDatas[0].temperature"
>
{{ filteredDatas[0].temperature }} °C
</td>
<td
id="speed"
class="defaulted"
v-show="filteredDatas && filteredDatas[0].windspeed"
>
{{ filteredDatas[0].windspeed }} km/h
</td>
</tr>
</tbody>
</table>
-----------------------------------------------------THIS H1, i can loop through my records without problem-----------------------------------------
<h1
v-for="(record, index) of filteredRecords"
:key="index"
:record="record"
>
<div :class="getClass(record)">
<strong
v-show="
record.path === 'rightoleft' &&
currentlyActive &&
record.id == currentlyActive.id
"
>{{ record.description }}
</strong>
</div>
</h1>
-----------------------------------------------------------------------------
</div>
</body>
</template>
<script>
import { mapGetters } from "vuex";
import moment from "moment";
export default {
name: "Table",
data() {
return {
templates: [],
records: [],
activeSpan: 0,
datas: [],
currentlyActive: null,
};
},
mounted() {
this.start();
},
computed: {
...mapGetters({
id: "id",
dataId: "dataId"
}),
createdDate() {
return moment().format("DD-MM-YYYY ");
},
createdHours() {
return moment().format("HH:mm ");
},
-----------------------------------------------THATS HOW I FILTER THROUGH MY RECORDS ARRAY WHAT WAS GIVEN FROM AN API
filteredRecords: function() {
let localId = this.id;
let filtered = this.records.filter(record => {
return record.template_id == localId;
});
console.log(filtered);
this.anyad = filtered;
return filtered;
},
--------------------------------------------------------------------------
filteredDatas: function() {
let localId2 = this.dataId;
let filtered2 = this.datas.filter(data => {
return data.id == localId2;
});
return filtered2;
}
},
methods: {
getClass(record) {
return {
rightoleft: record.path === "rightToleft",
};
},
------------------------------------------------------
start() {
this.currentlyActive = this.filteredRecords[0]; -----> I CANNOT GET THIS ONE ITS GIVING ME NOTHING HELP ------------------------------
if (!this.currentlyActive) return;
setTimeout(() => {
this.nextRecord();
}, this.currentlyActive.time * 1000);
},
nextRecord() {
let currIndex = this.filteredRecords.findIndex(
f => f === this.currentlyActive
);
if (currIndex === this.filteredRecords.length - 1) {
this.currentlyActive = this.filteredRecords[0];
} else {
this.currentlyActive = this.filteredRecords[currIndex + 1];
}
setTimeout(() => {
this.nextRecord();
}, this.currentlyActive.time * 1000);
}
----------------------------------------------------------------
},
created() {
if (!localStorage.signedIn) {
this.$router.replace("/");
} else {
this.$http.secured
.get("/api/v1/records")
.then(response => {
console.log(response.data);
this.records.splice(0, this.records.length - 1, ...response.data);
})
.catch(error => this.setError(error, "Something went wrong"));
this.$http.secured
.get("/api/v1/templates")
.then(response => {
this.templates = response.data;
})
.catch(error => this.setError(error, "Something went wrong"));
this.$http.secured
.get("/api/v1/data")
.then(response => {
this.datas = response.data;
})
.catch(error => this.setError(error, "Something went wrong"));
}
}
};
</script>
<style>
.rightoleft {
margin-top: 100px;
color: yellow;
width: 1000px;
height: 1000px;
animation: move 20s linear infinite;
}
@keyframes move {
0% {
transform: translate(50px);
opacity: 1;
}
90% {
transform: translate(800px);
opacity: 1;
}
92% {
transform: translate(800px);
opacity: 0;
}
94% {
transform: translate(800px);
opacity: 1;
}
96% {
transform: translate(800px);
opacity: 0;
}
98% {
transform: translate(800px);
opacity: 1;
}
/* 60% {
transform: translate(500px);
opacity: 1;
} */
100% {
opacity: 1;
transform: translate(50px);
}
}
</style>
ЖЕЛАТЕЛЬНЫЙ ВЫХОД: https://codesandbox.io/s/blue-sun-sm8tl?file= / src / components / HelloWorld. vue
Это точно , как я хочу выводить, как в песочнице, в песочнице он работает, потому что я даю ему вручную записи, чтобы он мог найти, например, отфильтрованные записи [0] .id
Не могли бы вы мне помочь с этим ?? что я должен делать ? Стоит ли копировать эту штуку в другой массив? если да, то как мне это сделать, потому что v-for работает, но доступа к нему нет.
Спасибо.