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+元素返回到第二个{ {1}}。否则，您将需要使用两个单独的数组。

请记住，在示例中我在这里使用div，但是数据和值应该在存储中，因此应该是this.$data。

this.$store.state.myArray

在Vue.js中使用v-for渲染列表？

2 个答案: