我最近在使用 vue3 的团队项目上工作。我还在尝试习惯 vue 组件和 api，所以请原谅我问了这么简单的问题。我在这个页面上工作，我应该从计算数据的数组中过滤出对象（使用计算方法），并在另一个名为 filterItem 的函数中使用数据信息。在我使用函数 filterItem 之前，数据（问题）中的所有内容都可以正常工作，因为我控制台记录了对象，但是当我在函数中传递数据并解析数组时，我得到了一个未定义的数组。但是，如果做一个小的编辑（如空格）并保存文件，那么本地服务器将重建并重新运行服务器，然后我会看到数组中的所有对象（issue.value），我想知道为什么会发生这种情况并且是有办法解决这个问题吗？
Vue单组件
<template >
<div class="relative bg-container-bg px-8 py-2">
<div v-for="log in issue" :key="log">
<div class="flex px-0.5 bg-container-bg py-4" v-if="log.failure_type === 'machine'">
<h1 class="myText px-3 rounded-lg ">Machine</h1>
<!-- <h1 v-for="item in filterItems(issue)" :key="item.key"></h1> -->
<!-- {{log.failure_type}} -->
</div>
</div>
<VueGoodTable
class="issue-table m-0.5"
v-bind:columns="headers"
v-bind:rows="issue"
v-bind:sort-options="{enabled: false}"
>
<template v-slot:table-row="props">
<button
class="
px-3 py-1
bg-gray-500
text-white
rounded-md
text-sm hover:bg-black focus:outline-none"
v-if="props.column.field == 'analysis'"
v-bind:value="props.row.issue_id"
v-on:click="onEdit"
>
Edit
</button>
</template>
</VueGoodTable>
</div>
</template>
<script lang='ts'>
const headers = [
{
label: 'Issue ID',
field: 'issue_id',
},
{
label: 'Part ID',
field: 'part_id',
},
{
label: 'Station ID',
field: 'station_id',
},
{
label: 'Description',
field: 'description',
},
{
label: 'Timestamp',
field: 'timestamp',
},
{
label: 'SN',
field: 'serial_number',
},
{
label: 'Failure Type',
field: 'failure_type',
},
{
label: 'Analysis',
field: 'analysis'
},
]
</script>
<script setup lang='ts'>
import router from '../../router/index'
import { useStore } from 'vuex'
import { computed, onMounted, watch, ref} from 'vue'
import { VueGoodTable } from 'vue-good-table-next'
import datetime_prettify from '../../utils/datetime_prettify'
const store = useStore()
const onEdit = (event: any) => {
store.commit('UPDATE_SELECTED_ISSUE', event.target.value)
router.push({name: 'Issue Analysis'})
}
onMounted(async () => {
// console.log('state', store.getters.selected_issue_id)
// console.log('test getter', store.getters.test('cus message'))
store.dispatch('fetch_issue');
})
const issue = computed(() => {
const data=store.getters.get_issue
const update_data=data.map((elem:any) => {
const d1=elem.raised_time_1
const d2=elem.raised_time_2
if(d1===d2) {
return { ...elem, timestamp: datetime_prettify(d1) }
} else {
return { ...elem, timestamp: `Start: ${datetime_prettify(d1)} \n\n End: ${datetime_prettify(d2)}` }
}
})
return update_data
})
function filterItems (logs:any){
let objects = Array<any>()
//for testing purposes on why logs.value is empt
if(logs.value.length > 0){
console.log("logs.value is not empty")
for (let i = 0; i < logs.value.length; i++) {
objects.push(logs.value[i])
}
}
if (logs.value.length === 0)console.log("value.log is empty")
return objects
}
console.log("before passing issue to filterItems\n", issue)
console.log("passing issue to filterItems\n",filterItems(issue))
console.log("passing Value: [{}] to filterItem\n", filterItems({value:[{}]}))
console.log("Test issue.value\n", issue.value)
console.log("Test store.getters.get_issue\n", store.getters.get_issue)
</script>
<style>
.myText {
color: rgb(235, 168, 52);
background-color: rgb(255, 230, 189);
}
.issue-table tbody span{
font-size: 13px;
}
</style>