V-for Vue.js中的计算条件

我是vue js的新手，遇到了一些问题。我有一个要打印到屏幕上的信息列表。每个项目都有一个类型，它们被分组在一起。每个组应该有一个标题，但不是每个项目。我有一个可行的解决方案，但感觉好像我错过了什么。示例如下：

<div id="AnimalList">
    <div v-for="animal in model.Animals">
        <div class="header" v-if="showAnimalHeader(animal.Type)">
            <span>{{animal.Type}}</span>
            <hr/>
        </div>
        <span>{{animal.Type}} <label>Animal Name:</label> {{animal.Name}} <label>Color:</label> {{animal.Color}} </span>
    </div>
</div>

示例数据：

{type: dog, name: fido, color: black},
{type: dog, name: lassie, color: white and brown},
{type: cat, name: garfield, color: orange},
{type: cat, name: nermal, color: gray},
{type: fish, name: nemo, color: orange}

---

我不喜欢这样，我要在Vue之外声明我的动物。感觉我做错了。我尝试在showAnimalHeader方法中使用commented data属性和this.currentAnimal，但随后遇到了数百次触发的方法（生成的屏幕仍然正确）。我觉得我应该使用computed而不是方法，但如果这是正确的方法，我正在努力让正确的动物进入computed道具，这样我就知道当前动物何时发生了变化。

我认为问题不一定在Vue代码中，而是在数据结构中。我会将“type”属性移动到父对象中，如下所示：

animalModel = [
    {
        "type": "dog",
        "items": [
            {
                "name": "fido", 
                "color": "black"
            },
            {
                "name": "lassie", 
                "color": "white and brown"
            }
        ]
    }, {
        "type": "cat",
        "items": [
            {
                "name": "garfield", 
                "color": "orange"
            },
            {
                "name": "nermal", 
                "color": "gray"
            },
        ]
    }, {
        "type": "fish",
        "items": [
            {

                "name": "nemo", 
                "color": "orange"
            }
        ]
    }
]

这将使您能够在vue文件的循环中放置一个循环，并实现所需的结果：

<div id="AnimalList">
    <div v-for="animalGroup in model.Animals">
        <div class="benefit-header">
            <span>{{animalGroup.Type}}</span>
            <hr/>
        </div>
        <span v-for="animal in animalGroup.items">{{animal.Type}} <label>Animal Name:</label> {{animal.Name}} <label>Color:</label> {{animal.Color}} </span>
    </div>
</div>

{{animalGroup.Type}

{{animal.Type}动物名称：{{animal.Name}颜色：{{animal.Color}

这将消除呈现此标记时对计算属性或方法的任何需要

您可能希望相应地更新命名约定，但这就是我处理该数据集的方式。祝你好运。希望这有帮助

<div id="AnimalList">
    <div v-for="animalGroup in model.Animals">
        <div class="benefit-header">
            <span>{{animalGroup.Type}}</span>
            <hr/>
        </div>
        <span v-for="animal in animalGroup.items">{{animal.Type}} <label>Animal Name:</label> {{animal.Name}} <label>Color:</label> {{animal.Color}} </span>
    </div>
</div>