来自嵌套数组的 V-for

Question

我从 vue.js 开始，我需要用另一个 v-for 中的 v-for 填充 selects。

我正在阅读有关此主题的问题，但无法找到一种方法使其适用于我的情况。

我有一个带有 title 和 description 的嵌套数组（游览），我在另一个数组中有一个 v-for 来填充带有游览标题的 select：

html:

<div class="row" id="app">
    <div v-for="(item, index) in hosters" v-bind:key="item.id" class="col-md-6 mb-50">
        <h4 class="mb-0">{{ item.name }} {{ item.lastname }}</h4>


        <div class="tour-options-select">
            <select id="select-suggestions" name="tour-options-dropdown" class="tour-options-dropdown">
                <option v-for="tour in tours">{{ tour.title }}</option>
            </select>
        </div>
    </div>
</div>

vue.js：

let app = new Vue({

    el: '#app',
    data: {
        city: 'mycity',
        hosters: null,
        tours: [],
        title: [],
    },

    created: function () {
        this.searchHoster()
    },
    methods: {
        searchHoster: function () {
            axios.post('searchHoster.php', { "city": this.city }).then((response) => {

            this.hosters = response.data.hosters;
            console.log(this.hosters);

            this.tours = this.hosters.map(res => res.tours);
            console.log(this.tours);

            this.title = this.tours.map(res => res.title);
            console.log(this.title);

            }).catch((error) => {

                console.log(error);

            });

        },

    }
})

我在console.log(this.title); 行中得到undefined，所以我尝试使用：

this.title = response.data.hosters.map(hoster => hoster.tours).flat().map(item => item.title);

但它给了我一个简单的数组，其中包含所有用户的所有标题。因此，所有选择都为每个人填充了相同的标题。关于如何使它工作的任何提示？

Answer 1

在第二个 v-for 上将 tours 更改为 item.tours：

<div v-for="(item, index) in hosters" v-bind:key="item.id" class="col-md-6 mb-50">
    <h4 class="mb-0">{{ item.name }} {{ item.lastname }}</h4>

    <div class="tour-options-select">
        <select id="select-suggestions" name="tour-options-dropdown" class="tour-options-dropdown">
            <option v-for="tour in item.tours">{{ tour.title }}</option>
        </select>
    </div>
</div>

Answer 2

不要分解您对渲染感兴趣的各种数据。相反，使用外部 v-for 中的索引值渲染内部部分。例如，假设您的数据看起来像您描述的数据，那么...

V-for="item in data"
    Render host info using item.name, etc.
    v-for="tour in item.tours"
        Render title and description from tour.title, etc.

更快更容易。我也可能建议使用手风琴式控件 - 呈现所有游览的表格，并允许用户通过复选框选择所需的行（然后将在详细信息区域中显示更多详细信息）。 - 这样他们就可以轻松查看所有选项。使用 @click 使项目可折叠以切换布尔值，该值控制嵌套 div 上的 show=boolean。

祝你好运。

Answer 3

<div class="tour-options-select">
            <select id="select-suggestions" name="tour-options-dropdown" class="tour-options-dropdown">
                <option v-for="tour in  ̶t̶o̶u̶r̶  item.tours">{{ tour.title }}</option>
            </select>
        </div>

将游览更改为 item.tours

由于您已经在迭代第一个 v-for，第二个 v-for 的上下文是“item”。 item.tours 会给你合适的对象来迭代。