Question

我从vue.js开始，我需要在select中填充v-for，其中v-for在另一个v-for中。

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

我有一个带有 title 和 description 的嵌套数组（行程），我在另一个数组中有一个select，以向<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>填充游览的标题：

html：

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);

            });

        },

    }
})

vue.js：

undefined

我在console.log(this.title);行中获得了this.title = response.data.hosters.map(hoster => hoster.tours).flat().map(item => item.title);，所以我尝试使用：

ListView.builder(
  reverse: true,
  itemBuilder: (context, index) => _chatCell(),
)

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

Answer 1

在第二个v上将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将为您提供适当的对象进行迭代。

嵌套数组中的V-for

3 个答案: