Question

我在使用非常简单的vue.js-app时遇到了问题。我有一个裁判列表，我想迭代该列表并使用来自ajax请求的数据附加每个项目。当我尝试显示该列表时，如果我在v-for - 元素上使用span，它会正常工作，但如果我使用div代替span，则会中断。为什么它与div打破？

这里有一个简单的例子：

<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>

<body>
    <div id="app">
        <p v-for="referee in referees">
            Name: {{referee.name}}<br>
            Match count: {{ referee.matches.length}}

            <!-- If I use span here, everything works just fine -->
            <span v-for="match in referee.matches">{{match.date}}</span>

            <!-- But if I switch to div, it no longer works -->
            <!--div v-for="match in referee.matches">{{match.date}}</div-->
        </p>
    </div>
</body>

<script>
    let myReferees = [
        { name: "Referee 1", },
        { name: "Referee 2", },
        { name: "Referee 3", },
    ];

    $(document).ready(function () {
        var app = new Vue({
            el: '#app',
            data: {
                referees: [],
            },

            created: function () {
                for(let referee of myReferees){
                    referee.matches = [];

                    let matches = [ 
                        {date: "date1"},
                        {date: "date2"},
                        {date: "date3"},
                    ];

                    for(let match of matches){
                        referee.matches.push({
                            date: match.date,
                        });
                    }

                    this.referees.push(referee);
                }
            },
        });
    });

</script>
</html>

这是一个小提琴：jsfiddle.net/vvu2f0m6/ 小提琴和示例代码是工作代码，但如果您更改span - ＆gt; div，您会看到问题所在。

Answer 1

这样做你应该没事。将p代码更改为div

<body>
        <div id="app">
            <div v-for="referee in referees">
                Name: {{referee.name}}<br>
                Match count: {{ referee.matches.length}}

                <!-- If I use span here, everything works just fine -->
                <div v-for="match in referee.matches">{{match.date}}</div>

                <!-- But if I switch to div, it no longer works -->
                <!--div v-for="match in referee.matches">{{match.date}}</div-->
            </div>
        </div>
    </body>

div

中不能有p

v-for取决于标签

1 个答案: