javascript - 计算属性无法正确获取数据 Vue.js ，

问题描述

嘿，我的计算属性有问题。

首先，我从我的 ruby on rails API 获取数据，进展顺利，现在我正在根据他们的 id 过滤这些数据，我在我的计算属性中进行，但是如果我控制台记录它，它只会给我 undefined i无法访问例如，filteredRecords[0].id因为它只是空的，但是，我可以遍历该数组并为我提供正确的数据。我认为这与时间有关，我在我的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 有效，但无法访问它。

谢谢。

标签： javascriptapivue.jsvuejs2vue-component

javascript - 计算属性无法正确获取数据 Vue.js ，

问题描述

解决方案

推荐阅读