VueJS：顯示過濾后的數組列表
[英]VueJS: Display filtered array list
問題描述
我創建了一個名為authors的數組，該數組中有 10 個對象。 每個 object 都有一個名稱屬性（字符串）、一個出生年份屬性（數字）和一個死者屬性（布爾值）。 到目前為止，我能夠將數組顯示為列表。 我現在想做的是：
- 在不復制原始數組的情況下顯示具有已故屬性為true的對象列表
- 在不復制原始數組的情況下顯示具有已故屬性為false的對象列表
- 顯示每個列表的所有數字的總和，並顯示在列表底部
為了實現第一個和第二個任務，我創建了名為deeasedAuthors和livingAuthors的計算函數，但是我在控制台中收到的錯誤是：
vue:634 [Vue 警告]：屬性或方法“deeasedAuthors”未在實例上定義，但在渲染期間被引用。 通過初始化該屬性，確保該屬性是反應性的，無論是在數據選項中，還是對於基於類的組件。 請參閱： https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties 。
這是我的 Javascript 代碼（app.js）：
var app = new Vue({
el: '#example-1',
data: {
authors: [
{
name: 'Edgar Allan Poe',
birthYear: 1809,
deceased: true
},
{
name: 'Dr. Seuss',
birthYear: 1896,
deceased: true
},
{
name: 'Margaret Atwood',
birthYear: 1939,
deceased: false
},
{
name: 'Robert Frost',
birthYear: 1874,
deceased: true
},
{
name: "Alice Walker",
birthYear: 1944,
deceased: false,
},
{
name: "J.K. Rowling",
birthYear: 1965,
deceased: false,
},
{
name: "Jonathan Swift",
birthYear: 1745,
deceased: true,
},
{
name: "George R.R. Martin",
birthYear: 1948,
deceased: false,
},
{
name: "Jane Austen",
birthYear: 1817,
deceased: true,
},
{
name: "Stephen King",
birthYear: 1809,
deceased: false,
}
]
}, computed: {
deceasedAuthors() {
console.log("Deceased authors working")
return this.authors.filter(dead => {
console.log(dead.deceased)
dead.deceased = true
})
}
},
computed: {
livingAuthors() {
console.log("Living authors working")
return this.authors.filter(dead => {
console.log(dead.deceased)
dead.deceased = false
})
}
}})
這是我的 HTML 代碼（index.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://unpkg.com/vue"></script>
</head>
<link rel="stylesheet" href="styles.css" />
<body>
<h1>Authors</h1>
<div id="app">
<ol>
<li v-for="author in authors">
{{ author.name }},
{{ author.birthYear }},
{{ author.deceased }}
</li>
</ol><br><br>
<ol>
<li v-for="authorr in deadAuthors">
{{ authorr.name }},
{{ authorr.birthYear }},
{{ authorr.deceased }}
</li>
</ol><br><br>
<ol>
<li v-for="authorrr in deceasedAuthors">
{{ authorrr.name }},
{{ authorrr.birthYear }},
{{ authorrr.deceased }}
</li>
</ol>
</div><br><br>
<ul id="example-1">
<li v-for="author in deceasedAuthors">
{{ author.name }}
</li>
</ul>
<script src="app.js"></script>
</body></html>
有誰知道如何做到這一點？
1 個解決方案
解決方案1
0 2021-04-04 22:37:37
您應該只計算 1 個 object。 這可以在內部有多個計算屬性：
computed: {
deceasedAuthors() {return ...},
livingAuthors() {return ...},
}
這些可以縮短為：
computed: {
alive() {
return this.authors.filter(author => !author.deceased)
},
deceased() {
return this.authors.filter(author => author.deceased)
}
},
您可以使用.length 獲取數組中的對象數：
alive.length
deceased.length
這是一個完整的示例： Vue SFC Playground
<template>
<div>
Alive
</div>
<ul>
<li v-for="(author, key) in alive" :key="key">
{{author.name}} - {{author.birthYear}}
</li>
<li>Total: {{alive.length}}</li>
</ul>
<div>
Deceased
</div>
<ul>
<li v-for="(author, key) in deceased" :key="key">
{{author.name}} - {{author.birthYear}}
</li>
<li>Total: {{deceased.length}}</li>
</ul>
</template>
<script>
import { defineComponent } from "vue";
export default defineComponent({
computed: {
alive() {
return this.authors.filter(author => !author.deceased)
},
deceased() {
return this.authors.filter(author => author.deceased)
}
},
data(){
return {
authors: [
{
name: 'Edgar Allan Poe',
birthYear: 1809,
deceased: true
},
{
name: 'Dr. Seuss',
birthYear: 1896,
deceased: true
},
{
name: 'Margaret Atwood',
birthYear: 1939,
deceased: false
},
{
name: 'Robert Frost',
birthYear: 1874,
deceased: true
},
{
name: "Alice Walker",
birthYear: 1944,
deceased: false,
},
{
name: "J.K. Rowling",
birthYear: 1965,
deceased: false,
},
{
name: "Jonathan Swift",
birthYear: 1745,
deceased: true,
},
{
name: "George R.R. Martin",
birthYear: 1948,
deceased: false,
},
{
name: "Jane Austen",
birthYear: 1817,
deceased: true,
},
{
name: "Stephen King",
birthYear: 1809,
deceased: false,
}
]
}
}
});
</script>
Vuejs 表格顯示 axios 過濾后的響應
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.