計算屬性在生產版本中未更新
P粉350036783
P粉350036783 2024-03-26 18:53:03
0
1
393

我有一個名為wildcardItem 的計算屬性,該屬性在使用開發建置時有效,但當我執行生產建置(mix --product) 時,該屬性不再更新。

我正在使用 Laravel Mix 來編譯程式碼。

mix.setPublicPath('../')
    .js('js/app.js', 'dist/app.js')
    .vue()
    .postCss('css/app.css', 'dist/app.css', [
        require('postcss-import'),
        require('@tailwindcss/nesting'),
        require('tailwindcss'),
        require('autoprefixer'),
    ])
    .options({
        manifest: false,
    });

組件設定

const items = ref([]);
const query = ref('');

const wildcardItem = computed(_ => {
    console.log('Computing wildcard...');

    return {
        label: query.value,
    };
});

document.addEventListener('CustomEvent', function (event) {
    items.value = [
        ...event.detail.items,
        wildcardItem,
    ];
});

元件模板

<template>
    <div>
        <input v-model="query" />
        <div v-for="(item, index) in items" :key="`item-${index}`">
            {{ item.label }}
        </div>
    </div>
</template>

在使用生產版本執行時,我也看不到 console.log

%2
P粉350036783
P粉350036783

全部回覆(1)
P粉037215587

compulated() 傳回一個 ref#,因此您需要使用 .value 來解開 ref 的值:

document.addEventListener('CustomEvent', function (event) {
    items.value = [
        ...event.detail.items,
        //wildcardItem, ❌
        wildcardItem.value, ✅
    ];
});

示範 1

#或者,您可以使用反應性轉換,這不需要任何展開(不需要 .value )。不要導入 refcompulated,而是使用 $ref$compulated (無需導入):

sssccc

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板