在 Vuejs 中使用 v-for 渲染列表？

Question

我正在尝试使用 v-for 呈现名称列表。我有一个名称数组，我能够创建模板并在 div 中呈现名称。我想要做的是，如果我在我的数据中添加任何新对象，我如何在新模板中渲染该部分数据。因此，例如，名称“michael”之前的所有内容都呈现在一个 div 中，但是如果我向数据添加一个新名称，则从那时起，名称应该呈现在另一个模板中。 这是CodePen 显示我的问题

new Vue({
  el: '#app',
  data() {
    return {
      myArray: [{
          name: 'Sam',
          value: 'sam'
        },
        {
          name: 'Gary',
          value: 'gary'
        },
        {
          name: 'Smith',
          value: 'smith'
        },
        {
          name: 'Sunny',
          value: 'sunny'
        },
        {
          name: 'Michael',
          value: 'michael'
        }
      ]
    }
  }
})

<link href="https://cdn.jsdelivr.net/npm/vuetify@1.5.14/dist/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <v-app id="inspire" class="ml-4">
    <template>
      <div v-for="person in myArray" key="person.name">
        {{person.name}}
      </div>
    </template>
    <template>
      //New names should be rendered here from the new values added to the data?
    </template>
  </v-app>
</div>

任何帮助将不胜感激。我希望我已经解释了我的需要。如果不告诉我。

Answer 1

你可以这样做

<template>
  ...
  <v-app id="inspire" class="ml-4">
    <template>
       <!-- Names -->
      <div v-for="person in myArray1" key="person.name">
        {{person.name}}
      </div>
    </template>
    <template>
      <!-- New names -->
      <div v-for="person in myArray2" key="person.name">
        {{person.name}}
      </div>
    </template>
    <v-btn @click="addNewPerson">
      Add
    </v-btn>
  </v-app>
  ...
</template>
<script>
export default {
  ...
  data() {
    return {
      myArray: [{
          name: 'Sam',
          value: 'sam'
        },
        {
          name: 'Gary',
          value: 'gary'
        },
        {
          name: 'Smith',
          value: 'smith'
        },
        {
          name: 'Sunny',
          value: 'sunny'
        },
        {
          name: 'Michael',
          value: 'michael'
        }
      ]
    }
  },
  computed: {
    myArray1() {
      return this.myArray.filter(it => it.recent !== true)
    },
     myArray2() {
      return this.myArray.filter(it => it.recent === true)
    },
  },
  methods: {
    addNewPerson() {
      this.myArray.push({
        name: 'Michael 1',
        value: 'michael 2',
        recent: true // add this
      })
    }
  }
  ...
}
</script>

Answer 2

要完成您想要的，您将需要使用 computed 值，该值通过检查它们是否位于超出原始链接的位置（或任何其他方法）来返回新添加的值，所以如果您首先加载组件并存储现有数组有 5 个元素，您可以计算返回前 5 个元素并将其放入第一个 div，然后另一个计算返回元素 6+ 到第二个 div。否则，您将需要使用两个单独的数组。

请记住，我在示例中使用的是this.$data，但数据和值应该在商店中，所以它应该是this.$store.state.myArray。

<template>
    <div>
        <div v-for="(element, index) of getExisting" :key="index">{{element.name}}</div>
        <div v-for="(element, index) of getNew" :key="index">{{element.name}}</div>
    </div>
</template>

<script>
export default {
    data: () => ({
        created () {
            this.existing = this.myArray.length
        },
        myArray: [
            { name: 'John' },
            { name: 'James' }
        ],
        existing: null
    }),
    computed: {
        getExisting () {
            return this.$data.myArray.slice(0, this.existing)
        },
        getNew () {
            return this.$data.myArray.slice(this.existing, myArray.length)
        }
    }
}
</script>