Question

我正在渲染带有标题的对象列表。标题已排序，我想在每个下一个标题之前添加一个，该标题以给定字母的新字母开头。

在v-for循环中，我使用了带有azTitle参数的方法itemTitle。在该方法中，我首先检查给定标题的首字母是否包含在azTitles数组中。如果没有，那么我将给定的第一个字母放入azTitles数组中，然后返回第一个字母作为标题组的标题，且标题相同。

<div v-for="(item, key, index) in videos">

    {{ azTitle(item.title) }}

    <p>{{ item.title }}</p>

</div>

export default {
    data: function() {
        return {
           azTitles: []
        }
    },
    methods: {
        makeAzTitle(title){
            return title.substring(0, 1);
        },
        azTitle(itemTitle){ 

            if (!this.azTitles.includes(this.makeAzTitle(itemTitle))) {

                this.azTitles.push(this.makeAzTitle(itemTitle))

                return "<h2>"+this.makeAzTitle(itemTitle)+"</h2>"

            }

        }
    }
}

我期望的结果是这样：

A
安东尼
安德鲁
B
伯大尼
E
艾米丽
艾玛
...

但是我明白了：
安东尼
安德鲁
伯大尼
艾米丽
艾玛
...

为什么该方法不呈现值？

Answer 1

您不能像循环那样处理数据。我要做的是在v-show元素上使用h2并检查是否需要显示它。

<div v-for="(item, index) in videos">
  <h2 v-show="isFirstTitle(index)">{{ makeAzTitle(item.title) }}</h2>
  <p>{{ item.title }}</p>
</div>

methods: {
  makeAzTitle(title){
    return title.substring(0, 1);
  },
  isFirstTitle(index){ 
   if (index === 0) {
     return true;
   }

   if (this.makeAzTitle(this.videos[index].title) !== this.makeAzTitle(this.videos[index - 1].title)) {
     return true;
   }
   return false;
  }
}

Answer 2

那行不通。

Vue仅在template syntax中接受expressions。您的函数声明不是表达式，因此不起作用。

您最好的选择是使用v-if或v-show并使用一种方法作为这些值的值。

Answer 3

我认为这是实现它的错误方法。不幸的是，我无法向您解释为什么它不起作用，但是我可以向您展示一种更好的方法来做您想要的事情。

您应该将自己的视频收藏起来，并让它们在方法内归类为这种风格的对象：

{
    A: [
        { title: 'Andrew' },
        { title: 'Alex' },
        { title: 'Alduin' }
    ],
    B: [
        { title: 'Bread' },
        { title: 'Butter' }
    ],
    E: [
        { title: 'Emma' },
        { title: 'Ernst' }
    ]
}

然后您可以按照以下方式正确循环播放：

new Vue({
  el: '#app',
  data: {
    videos: [{
        title: 'Andrew'
      },
      {
        title: 'Alex'
      },
      {
        title: 'Alduin'
      },
      {
        title: 'Bread'
      },
      {
        title: 'Butter'
      },
      {
        title: 'Emma'
      },
      {
        title: 'Ernst'
      }
    ]
  },
  methods: {
    categorizedVideos() {
      let cv = {};

      for (let i = 0; i < this.videos.length; i++) {
        let video = this.videos[i];
        let category = video.title.substring(0, 1);

        if (!cv[category]) {
          cv[category] = [];
        }

        cv[category].push(video);
      }

      return cv;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div v-for="(videos, key, index) in categorizedVideos()">
    <h2>{{ key }}</h2>
    <div v-for="video in videos"> {{ video.title }}</div>
  </div>
</div>

v-for循环中使用的方法不返回值

3 个答案: