VueJS：显示过滤后的数组列表答案

【问题标题】：VueJS: Display filtered array listVueJS：显示过滤后的数组列表
【发布时间】：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>

有人知道如何做到这一点吗？

【问题讨论】：

标签： javascript html arrays vue.js filter

【解决方案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>

【讨论】：