如何将第一个对象从数组传递到Vue.js中的变量？

Question

我有一个计算属性，它是一个来自api的对象数组。 我使用变量在页面上显示这些对象。如何在页面加载时在变量中设置第一个对象？

谢谢。

Answer 1

使用计算属性通过其索引访问第一个数组元素：

new Vue({
  el: '#app',
  data () {
    return {
      items: []
    }
  },
  mounted () {
    // simulate an async api call
    setTimeout(() => {
      this.items = Array.from(Array(10), (x,i) => {
        return {
          id: i + 1,
          text: `Item ${i + 1}`
        }
      })
    }, 2500)
  },
  computed: {
    item () {
      return !!this.items.length ? this.items[0] : null
    }
  }
})

/* loading dots */

* {
  background-color: rgba(129,212,250,1);
}

.loading:after {
  content: ' .';
  animation: dots 1s steps(5, end) infinite;}

@keyframes dots {
  0%, 20% {
    color: rgba(0,0,0,0);
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  40% {
    color: black;
    text-shadow:
      .25em 0 0 rgba(0,0,0,0),
      .5em 0 0 rgba(0,0,0,0);}
  60% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 rgba(0,0,0,0);}
  80%, 100% {
    text-shadow:
      .25em 0 0 black,
      .5em 0 0 black;}}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-if="item">
    <p>ID: {{ item.id }}</p>
    <p>Text: {{ item.text }}</p>
  </div>
  <p class="loading" v-else>Loading</p>
</div>