我创建了一个名为 authors 的数组,该数组中有 10 个对象。每个对象都有一个 name 属性(String)、一个 birthYear 属性(Number)和一个 deceased 属性(Boolean)。到目前为止,我能够将数组显示为列表。我现在要做的是:
为了实现第一个和第二个任务,我创建了名为 deceasedAuthors 和 livingAuthors 的计算函数,但是我在控制台中收到的错误是这个:
<块引用>vue:634 [Vue 警告]:属性或方法“deceasedAuthors”未在实例上定义,但在渲染期间被引用。通过初始化属性,确保此属性是反应性的,无论是在数据选项中,还是对于基于类的组件。请参阅: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>
有人知道如何做到这一点吗?
答案 0 :(得分:0)
您应该只有 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>