Question

我需要创建一个剧院应用。我有一个带有两个数组的JSON文件。节和组。我可以在Vue应用程序中加载两个数组，但是我需要比较它们并找到匹配项。数组1包含座位，数组2包含预订。我使用简单的v-for属性循环遍历第一个数组（各节），并且能够显示结果/位子。我该如何比较数组1和数组2，例如在对象相同且座位被占用的情况下向座位添加一个类？

一个部分具有名称，行和席位。
一个小组有一个名字，行和一个席位。

我认为我必须检查名称中的连续座位是否与该部分匹配。如果是这样，我可以将ID添加为类。

用于加载JSON数据的JavaScript部分

export default {
    name: 'app',
    data() {
        return {
            json: [],
        }
    },

    mounted() {
        axios({
            method: "GET",
            "url": url
        }).then(result => {
            this.json = result.data;
        }, error => {
            console.log(error);
        });

    },

}

HTML循环显示各个部分，但不显示占用的座位

<div v-for="(item, index) in json.sections" v-bind:key="index">
  <h3>{{ item.name }}</h3>
    <div v-for="(item, index) in item.rows" v-bind:key="index">
      <div class="rownr">{{ item.row }} </div>
        <div v-for="(item, index) in item.seats" v bind:key="index"v-bind:class=item.rank>
          <div :class=item.row>
            <div v-for="(group, index) in json.groups" v-bind:key="index">
              <div v-for="(group, index) in group.seats" v-bind:key="index">{{ item.seat}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
</div>

JSON文件（部分）

{
"sections": [{
        "name": "balcony",
        "rows": [{
                "row": "1",
                "seats": [{
                        "seat": "1",
                        "rank": "rank1"
                    },
                    {
                        "seat": "3",
                        "rank": "rank1"
                    },
                    {
                        "seat": "4",
                        "rank": "rank1"
                    },
                    {
                        "seat": "2",
                        "rank": "rank1"
                    }
                ]
            },
            {
                "row": "2",
                "seats": [{
                        "seat": "1",
                        "rank": "rank1"
                    ...
            },

        ]
    },
    {
        "name": "main hall",
        "rows": [{
                "row": "1",
                "seats": [{
                        "seat": "1",
                        "rank": "rank1"
                    },
                    {
                        "seat": "3",
                        "rank": "rank3"
                    },
                    ...
            {
                "row": "2",
                "seats": [{
                        "seat": "1",
                        "rank": "rank2"
                    },
                }
],
"groups": [{
        "id": "1",
        "seats": [{
                "section": "main hall",
                "row": "2",
                "seat": "4"
            },
            {
                "section": "main hall",
                "row": "1",
                "seat": "2"
            }
        ]
    },
    {
        "id": "2",
        "seats": [{
                "section": "main hall",
                "row": "2",
                "seat": "6"
            },
            {
                "section": "main hall",
                "row": "2",
                "seat": "5"
            }
        ]
    }
]}

Answer 1

您可以更改json变量，以便在seats部分中找到同一席位的情况下，groupId部分将使用groups属性进行扩展：

json.groups.forEach( ({id, seats}) =>
    seats.forEach( ({section, row, seat}) =>
        json.sections.find(s => s.name == section)
            .rows.find(r => r.row == row)
            .seats.find(s => s.seat == seat)
            .groupId = id
    )
);

此代码假定groups部分中始终存在sections部分中的座位引用。如果没有，您将得到一个例外。

现在，您可以测试呈现循环中groupId属性的存在并采取相应的措施。

发生无效座位时

如果您的groups数据引用了sections部分中不存在的节，行或席位，则将引发异常。如果您想获得有关缺失内容的更多详细信息，请使用此更详尽的代码。它将列出有问题的部分/行/座位：

json.groups.forEach( ({id, seats}) =>
    seats.forEach( ({section, row, seat}) => {
        const foundSection = json.sections.find(s => s.name == section);
        if (!foundSection) throw "Section " + section + " is referenced in groups, but that section does not exist in sections";
        const foundRow = foundSection.rows.find(r => r.row == row);
        if (!foundRow) throw "Section " + section + ", row " + row + " is referenced in groups, but that section/row does not exist in sections";
        const foundSeat = foundRow.seats.find(s => s.seat == seat);
        if (!foundSeat) throw "Section " + section + ", row " + row + ", seat " + seat + " is referenced in groups, but that section/row/seat does not exist in sections";
        foundSeat.groupId = id;
    })
);

基于该信息，请修正您的输入数据，以便可以对每个座位进行匹配。

渲染

渲染部分可以使用v-if和v-else属性：

{{ item.seat }}
<span v-if="'groupId' in item">occupied</span>
<span v-else>free</span>

Vue，比较两个数组并检查结果是否匹配

1 个答案:

发生无效座位时

渲染