VueJS：显示过滤后的数组列表
Posted
技术标签:
【中文标题】VueJS：显示过滤后的数组列表【英文标题】：VueJS: Display filtered array list 【发布时间】：2021-06-30 22:08:00 【问题描述】：我创建了一个名为 authors 的数组，该数组中有 10 个对象。每个对象都有一个name 属性（字符串）、一个birthYear 属性（数字）和一个deeased 属性（布尔值）。到目前为止，我能够将数组显示为列表。我现在要做的是：
-
在不复制原始数组的情况下显示具有已故属性的对象列表true
在不复制原始数组的情况下将具有已故属性的对象列表显示为false
显示每个列表所有数字的总和并显示在列表底部
为了完成第一个和第二个任务，我创建了名为 deeasedAuthors 和 livingAuthors 的计算函数，但我在控制台中收到的错误是这个：
vue:634 [Vue 警告]：属性或方法“deeasedAuthors”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保此属性是反应性的，无论是在数据选项中，还是对于基于类的组件。请参阅：https://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 个计算对象。这里面可以有多个计算属性：
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：显示过滤后的数组列表的主要内容，如果未能解决你的问题，请参考以下文章