Question

我正在尝试使用vue.js在表视图中显示简单的硬编码数据。到目前为止，一切正常，但是对于显示的每一行数据（标题，年份，详细信息），我都有一个新的标题，而不是标题只有一行。

vue.js文件：

class Post {
constructor(title, year, details) {
    this.title = title;
    this.year = year;
    this.details = details;
}
}

const app = new Vue({
el: '#app',
data: {
    search: '',
    postList: [
        new Post(
            'Movie1',
            '1987',
            'Details here'
        ),
        new Post(
            'Movie2',
            '2006'
        ),
        new Post(
            'Movie3',
            '1999',
        ),
    ]
    },
    computed: {
    filteredList() {
        return this.postList.filter(post => {
            return 
  post.title.toLowerCase().includes(this.search.toLowerCase())
        })
    }
}
})

和索引：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js">

<div id="app">
<div class="search-wrapper">
    <input type="text" v-model="search" placeholder="Search" />
</div>
<br />
<div class="wrapper">
    <div class="card" v-for="post in filteredList">
        <table style="width:100%">
            <tr>
                <th>Title</th>
                <th>Release date</th>
                <th>Details</th>
            </tr>
            <tr>
                <td>{{ post.title }}</td>
                <td>{{ post.year }}</td>
                <td>{{ post.details }}</td>
            </tr>
        </table>
    </div>
</div>

我认为它与HTML端有关，我怀疑它使用v-for指令进行渲染吗？

Answer 1

v-for是指令，它将在数组的每个元素上循环并呈现数组的每个元素的所有子元素。
您应该这样放置v-for：

<table style="width:100%">
                <tr>
                    <th>Title</th>
                    <th>Release date</th>
                    <th>Details</th>
                </tr>
                <tr v-for="post in filteredList">
                    <td>{{ post.title }}</td>
                    <td>{{ post.year }}</td>
                    <td>{{ post.details }}</td>
                </tr>
</table>

有关v-for指令的更多信息，请参见this

如何摆脱表格行标题重复？

1 个答案: