首页  >  问答  >  正文

计算属性在生产版本中未更新

我有一个名为 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

有人可以指导我为什么它不起作用吗? :)

P粉350036783P粉350036783206 天前310

全部回复(1)我来回复

  • P粉037215587

    P粉0372155872024-03-27 14:53:49

    compulated() 返回一个 ref,因此您需要使用 .value 来解开 ref 的值:

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

    演示 1< /p>

    或者,您可以使用反应性转换,这不需要任何展开(不需要 .value )。不要导入 refcompulated,而是使用 $ref$compulated (无需导入):

    sssccc
    

    演示 2

    您看到的另一个问题是,当 wildcardItem 更改时,items 未更新。您需要重构您的解决方案,使 items 成为基于附加到自定义事件项目的 wildcardItemcompulated 属性:

    sssccc
    

    演示 3

    回复
    0
  • 取消回复