Javascript Vue.js计算属性未更新

我正在使用Vue.js computed属性，但遇到了一个问题：在正确的时间调用computed方法，但忽略了computed方法返回的值

我的方法

computed: {
    filteredClasses() {
        let classes = this.project.classes
        const ret = classes && classes.map(klass => {
            const klassRet = Object.assign({}, klass)
            klassRet.methods = klass.methods.filter(meth => this.isFiltered(meth, klass))
            return klassRet
        })
        console.log(JSON.stringify(ret))
        return ret
    }
}

console.log

语句输出的值是正确的，但当我在模板中使用

filteredclass

时，它只使用第一个缓存值，从不更新模板。Vue chrome开发工具证实了这一点（

FilteredClass

在初始缓存后从不更改）

有人能告诉我为什么会发生这种情况吗

Project.vue

<template>
<div>
    <div class="card light-blue white-text">
        <div class="card-content row">
            <div class="col s4 input-field-white inline">
                <input type="text" v-model="filter.name" id="filter-name">
                <label for="filter-name">Name</label>
            </div>
            <div class="col s2 input-field-white inline">
                <input type="text" v-model="filter.status" id="filter-status">
                <label for="filter-status">Status (PASS or FAIL)</label>
            </div>
            <div class="col s2 input-field-white inline">
                <input type="text" v-model="filter.apkVersion" id="filter-apkVersion">
                <label for="filter-apkVersion">APK Version</label>
            </div>
            <div class="col s4 input-field-white inline">
                <input type="text" v-model="filter.executionStatus" id="filter-executionStatus">
                <label for="filter-executionStatus">Execution Status (RUNNING, QUEUED, or IDLE)</label>
            </div>
        </div>
    </div>
    <div v-for="(klass, classIndex) in filteredClasses">
        <ClassView :klass-raw="klass"/>
    </div>
</div>
</template>

<script>
import ClassView from "./ClassView.vue"

export default {
    name: "ProjectView",

    props: {
        projectId: {
            type: String,
            default() {
                return this.$route.params.id
            }
        }
    },

    data() {
        return {
            project: {},
            filter: {
                name: "",
                status: "",
                apkVersion: "",
                executionStatus: ""
            }
        }
    },

    async created() {
        // Get initial data
        const res = await this.$lokka.query(`{
            project(id: "${this.projectId}") {
                name
                classes {
                    name
                    methods {
                        id
                        name
                        reports
                        executionStatus
                    }
                }
            }
        }`)

        // Augment this data with latestReport and expanded
        const reportPromises = []
        const reportMeta     = []
        for(let i = 0; i < res.project.classes.length; ++i) {
           const klass = res.project.classes[i];
           for(let j = 0; j < klass.methods.length; ++j) {
               res.project.classes[i].methods[j].expanded = false
               const meth = klass.methods[j]
               if(meth.reports && meth.reports.length) {
                   reportPromises.push(
                       this.$lokka.query(`{
                           report(id: "${meth.reports[meth.reports.length-1]}") {
                               id
                               status
                               apkVersion
                               steps {
                                   status platform message time
                               }
                           }
                       }`)
                       .then(res => res.report)
                    )
                    reportMeta.push({
                        classIndex: i,
                        methodIndex: j
                    })
                }
            }
        }

        // Send all report requests in parallel
        const reports = await Promise.all(reportPromises)

        for(let i = 0; i < reports.length; ++i) {
           const {classIndex, methodIndex} = reportMeta[i]
           res.project.classes[classIndex]
                      .methods[methodIndex]
                      .latestReport = reports[i]
       }

       this.project = res.project

       // Establish WebSocket connection and set up event handlers
       this.registerExecutorSocket()
   },

   computed: {
       filteredClasses() {
           let classes = this.project.classes
           const ret = classes && classes.map(klass => {
                const klassRet = Object.assign({}, klass)
                klassRet.methods = klass.methods.filter(meth => this.isFiltered(meth, klass))
                return klassRet
            })
            console.log(JSON.stringify(ret))
            return ret
        }
    },

    methods: {
        isFiltered(method, klass) {
            const nameFilter = this.testFilter(
                this.filter.name,
                klass.name + "." + method.name
            )
            const statusFilter = this.testFilter(
                this.filter.status,
                method.latestReport && method.latestReport.status
           )
           const apkVersionFilter = this.testFilter(
               this.filter.apkVersion,
               method.latestReport && method.latestReport.apkVersion
           )
           const executionStatusFilter = this.testFilter(
               this.filter.executionStatus,
               method.executionStatus
           )
           return nameFilter && statusFilter && apkVersionFilter && executionStatusFilter
       },
       testFilter(filter, item) {
           item = item || ""
           let outerRet = !filter ||
           // Split on '&' operator
           filter.toLowerCase().split("&").map(x => x.trim()).map(seg =>
               // Split on '|' operator
               seg.split("|").map(x => x.trim()).map(segment => {
                   let quoted = false, postOp = x => x
                   // Check for negation
                   if(segment.indexOf("!") === 0) {
                       if(segment.length > 1) {
                           segment = segment.slice(1, segment.length)
                           postOp = x => !x
                       }
                   }
                   // Check for quoted
                   if(segment.indexOf("'") === 0 || segment.indexOf("\"") === 0) {
                       if(segment[segment.length-1] === segment[0]) {
                           segment = segment.slice(1, segment.length-1)
                           quoted = true
                       }
                   }
                   if(!quoted || segment !== "") {
                       //console.log(`Item: ${item}, Segment: ${segment}`)
                       //console.log(`Result: ${item.toLowerCase().includes(segment)}`)
                       //console.log(`Result': ${postOp(item.toLowerCase().includes(segment))}`)
                   }
                   let innerRet = quoted && segment === "" ?
                       postOp(!item) :
                       postOp(item.toLowerCase().includes(segment))

                   //console.log(`InnerRet(${filter}, ${item}): ${innerRet}`)

                   return innerRet
               }).reduce((x, y) => x || y, false)
           ).reduce((x, y) => x && y, true)

           //console.log(`OuterRet(${filter}, ${item}): ${outerRet}`)
           return outerRet
       },
       execute(methID, klassI, methI) {
           this.project.classes[klassI].methods[methI].executionStatus = "QUEUED"
           // Make HTTP request to execute method
           this.$http.post("/api/Method/" + methID + "/Execute")
           .then(response => {
           }, error =>
               console.log("Couldn't execute Test: " + JSON.stringify(error))
           )
       },
       registerExecutorSocket() {
           const socket = new WebSocket("ws://localhost:4567/api/Executor/")

           socket.onmessage = msg => {
               const {methodID, report, executionStatus} = JSON.parse(msg.data)

               for(let i = 0; i < this.project.classes.length; ++i) {
                   const klass = this.project.classes[i]
                   for(let j = 0; j < klass.methods.length; ++j) {
                       const meth = klass.methods[j]
                       if(meth.id === methodID) {
                           if(report)
                               this.project.classes[i].methods[j].latestReport = report
                           if(executionStatus)
                               this.project.classes[i].methods[j].executionStatus = executionStatus
                           return
                       }
                   }
               }
           }
       },
       prettyName: function(name) {
           const split = name.split(".")
           return split[split.length-1]
       }
   },

   components: {
       "ClassView": ClassView
   }
}
</script>

<style scoped>
</style>

名称
状态（通过或失败）
APK版本
执行状态（正在运行、排队或空闲）
从“/ClassView.vue”导入类视图
导出默认值{
名称：“项目视图”，
道具：{
项目D：{
类型：字符串，
默认值（）{
返回此。$route.params.id
}
}
},
数据（）{
返回{
项目：{}，
过滤器：{
姓名：“，
地位：“，
apkVersion:“”，
执行情况：“
}
}
},
异步创建（）{
//获取初始数据
const res=等待此消息。$lokka.query(`{
项目（id:“${this.projectId}”）{
名称
班级{
名称
方法{
身份证件
名称
报告
行刑状态
}
}
}
}`)
//使用latestReport和expanded来扩充此数据
const reportpromissions=[]
const reportMeta=[]
for（设i=0；ires.report）
)
reportMeta.push({
classIndex:我，
方法索引：j
})
}
}
}
//并行发送所有报告请求
const reports=wait Promise.all（reportPromises）
for（设i=0；i{
const klassRet=Object.assign（{}，klass）
klassRet.methods=klass.methods.filter（meth=>this.isfilter（meth，klass））
返回Klasset
})
log（JSON.stringify（ret））
回程网
}
},
方法：{
isFiltered（方法，klass）{
const nameFilter=this.testFilter(
this.filter.name，
klass.name+“+method.name”
)
const statusFilter=this.testFilter(
这个.filter.status，
method.latestReport&&method.latestReport.status
)
const apkVersionFilter=this.testFilter(
this.filter.apkVersion，
method.latestReport&&method.latestReport.apkVersion
)
const executionStatusFilter=this.testFilter(
this.filter.executionStatus，
方法.executionStatus
)
返回nameFilter&&statusFilter&&apkVersionFilter&&executionStatusFilter
},
testFilter（过滤器，项目）{
项目=项目| |“”
让outerRet=！过滤器||
//在“&”运算符上拆分
filter.toLowerCase（）.split（“&”）.map（x=>x.trim（））.map（seg=>
//在“|”运算符上拆分
seg.split（“|”）.map（x=>x.trim（））.map（segment=>{
让quoted=false，postOp=x=>x
//检查否定
if（段索引（“！”）==0）{
如果（段长度>1）{
段=段.切片（1，段.长度）
postOp=x=>！x
}
}
//检查报价
if（segment.indexOf（“'）==0 | | segment.indexOf（“\”）==0）{
if（段[segment.length-1]==段[0]）{
段=段.切片（1，段.长度-1）
quoted=真
}
}
如果（！quoted | |段！==“”）{
//log（`Item:${Item}，Segment:${Segment}`）
<ClassView :klass-raw="klass" :key="klass.id"/>

<div
  :key="JSON.stringify(filteredClasses)" 
  v-for="(klass, classIndex) in filteredClasses"
>
  <ClassView
    :key="classIndex"
    :klass-raw="klass"
  />
</div>

let classes = [
    {
        my_prop: 'hello'
    },
    {
        my_prop: 'hello again'
    },
]

computed: {
    computed_classes: {
        classes.map( entry => entry.new_prop = some_value )
    }
}

import { defineComponent, ref } from 'vue'

export default defineComponent({
  name: 'CardDisplay',
  props: {
    items: {
      type: Array,
      default: () => []
    },
    itemComponent: Object,
    maxItemWidth: { type: Number, default: 200 },
    itemRatio: { type: Number, default: 1.25 },
    gapSize: { type: Number, default: 50 },
    maxYCount: { type: Number, default: Infinity }
  },
  setup () {
    return {
      containerSize: ref({ width: 0, height: 0 }),
      count: ref({ x: 0, y: 0 }),
      scale: ref(0),
      prevScrollTimestamp: 0,
      scroll: ref(0),
      isTouched: ref(false),
      touchStartX: ref(0),
      touchCurrentX: ref(0)
    }
  },
  computed: {
    touchDeltaX (): number {
      return this.touchCurrentX - this.touchStartX
    }
  },
  ...
}