我有一个API项目,我需要在表中显示一些数据,但我也有两个日期字段,用户应该能够填充一个开始和最后一个日期,然后当提交按钮只点击它的“日期”字段在两个日期之间的数据显示时,但我找不到方法来做. 以下是有关的代码的一部分: 还有javascript部分: 最后一个我工作的数据的样本: 我也知道我不应该用vfor和vif,如果我的数据样本是有限的,我已经被授权为简单的原因. 谢谢!

2022-10-15 12:41:31标签vue.js
提问

我有一个API项目,我需要在表中显示一些数据,但我也有两个日期字段,用户应该能够填充一个开始和最后一个日期,然后当提交按钮只点击它的“日期”字段在两个日期之间的数据显示时,但我找不到方法来做。 以下是有关的代码的一部分: 还有javascript部分: 最后一个我工作的数据的样本: 我也知道我不应该用v-for和v-if,如果我的数据样本是有限的,我已经被授权为简单的原因。 谢谢!

          <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>

<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);
    });
},

{ 
"_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"
    }
]
}

▼版权说明

相关文章也很精彩
推荐内容
更多标签
相关热门
全站排行
随便看看

错说cuoshuo.com——程序员的报错记录

部分内容根据CC版权协议转载,如果您希望取消转载请发送邮件到cuoshuo8@163.com

辽ICP备19011660号-5