display of data under several conditions, some of which may not exist - vue.js

Question

I have an API project where I need to display some data in a table, but I also have two date fields that the user should be able to fill with a start and a last date, and then when the submit button is clicked, only the data where its "date" field is comprised between the two dates is displayed, but i can't find a way to do it.
Here is the part of the code that is concerned :
<input
style="position: relative; left: 750px"
type="date"
label="starting date"
/>
<input
style="position: relative; left: 750px"
type="date"
label="last date"
/>
<button
style="position: relative; left: 750px"
type="button"
class="btn btn-secondary"
>
submit dates
</button>
<hr />
<table class="table table-hover table-striped">
<!--Table Head-->
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">apkMode</th>
<th scope="col">date</th>
<th scope="col">timestamp</th>
<th scope="col">user</th>
<th scope="col">news</th>
<th scope="col">selfEvaluationQuestion</th>
<th scope="col">selfEvaluationAnswer</th>
<th scope="col">questionQuiz</th>
<th scope="col">answerQuiz</th>
<th scope="col">quizAnswer</th>
<th scope="col">questionQ2</th>
<th scope="col">answerQ2</th>
<th scope="col">similarityq2</th>
<th scope="col">questionQ0</th>
<th scope="col">answerQ0</th>
</tr>
</thead>
<tbody>
<tr v-for="(sessions, _id) in sessions" :key="_id">
<td>{{ sessions._id }}</td>
<td>{{ sessions.apkMode }}</td>
<td>{{ sessions.date }}</td>
<td>{{ sessions.timestamp }}</td>
<td>{{ sessions.user }}</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p v-if="sessions.interactions[index].type === 'newsCore'">
{{ sessions.interactions[index].text }}
</p>
</span>
</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p
v-if="
sessions.interactions[index].type ===
'selfEvaluationQuestion'
"
>
{{ sessions.interactions[index].text }}
</p>
</span>
</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p
v-if="
sessions.interactions[index].type ===
'selfEvaluationAnswer'
"
>
{{ sessions.interactions[index].text }}
</p>
</span>
</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p
v-if="
sessions.interactions[index].type === 'questionQuiz'
"
>
{{ sessions.interactions[index].text }}
</p>
</span>
</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p
v-if="sessions.interactions[index].type === 'answerQuiz'"
>
{{ sessions.interactions[index].text }}
</p>
</span>
</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p
v-if="sessions.interactions[index].type === 'answerQuiz'"
>
{{ sessions.interactions[index].quizAnswer }}
</p>
</span>
</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p
v-if="sessions.interactions[index].type === 'questionQ2'"
>
{{ sessions.interactions[index].text }}
</p>
</span>
</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p v-if="sessions.interactions[index].type === 'answerQ2'">
{{ sessions.interactions[index].text }}
</p>
</span>
</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p v-if="sessions.interactions[index].type === 'answerQ2'">
{{ sessions.interactions[index].similarity }}
</p>
</span>
</td>
<td>
<span
v-for="(interactions, index) in sessions.interactions"
:key="index"
>
<p v-if="sessions.interactions[index].type === 'answerQ0'">
{{ sessions.interactions[index].text }}
</p>
</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
and the javascript part :
<script>
import axios from "axios";
import papa from "papaparse";
export default {
data() {
return {
sessions: [],
};
},
methods: {
getSessions() {
const path = "http://localhost:5000/data_for_front";
axios
.get(path)
.then((res) => {
this.sessions = res.data;
papa.parse(this.sessions, {
header: true,
dynamicTyping: true,
skipEmptyLines: true,
complete(result) {
this.sessions = result.data;
},
});
})
.catch((err) => {
console.error(err);
});
},
finally, a sample of the data I am working with :
{
"_id" : "userid",
"apkMode" : "SCROLL",
"date" : "2022-04-25",
"timestamp" : NumberLong(1650913068512),
"user" : "username",
"interactions" : [
{
"interactionTimestamp" : NumberLong(1650912989260),
"subject" : "ROBOT",
"type" : "selfEvaluationQuestion",
"text" : "questiontext"
},
{
"interactionTimestamp" : NumberLong(1650913013738),
"subject" : "HUMAN",
"type" : "selfEvaluationAnswer",
"text" : "questionresponse"
},
{
"interactionTimestamp" : NumberLong(1650913022948),
"subject" : "ROBOT",
"type" : "newsCore",
"text" : "newstext"
},
{
"interactionTimestamp" : NumberLong(1650913042076),
"subject" : "ROBOT",
"type" : "questionQ2",
"text" : "Q2text"
},
{
"interactionTimestamp" : NumberLong(1650913047978),
"subject" : "ROBOT",
"type" : "questionQ0",
"text" : "Q0text"
},
{
"interactionTimestamp" : NumberLong(1650913047978),
"subject" : "HUMAN",
"type" : "answerQ2",
"text" : "Q2answer",
"similarity" : 0.0,
"correctAnswer" : "Q2correctanswer"
},
{
"interactionTimestamp" : NumberLong(1650913058686),
"subject" : "HUMAN",
"type" : "answerQ0",
"text" : "Q0answer"
},
{
"interactionTimestamp" : NumberLong(1650913058867),
"subject" : "ROBOT",
"type" : "questionEnd",
"text" : "Endquestion"
},
{
"interactionTimestamp" : NumberLong(1650913068512),
"subject" : "HUMAN",
"type" : "answerEnd",
"text" : "Endanswer"
}
]
}
Also, I know I should not be using v-for with v-if but Since my data sample is limited, I have been authorized to for simplicity reasons.
Thanks !