Les propriétés calculées ne sont pas mises à jour dans les versions de production
P粉350036783
P粉350036783 2024-03-26 18:53:03
0
1
392

Lorsque j'ai une propriété appelée wildcardItem 的计算属性,该属性在使用开发构建时有效,但当我运行生产构建 (mix --product), la propriété ne se met plus à jour.

J'utilise Laravel Mix pour compiler le code.

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,
    });

Paramètres des composants

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,
    ];
});

Modèle de composant

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

Je ne peux pas non plus voir console.log lors de l'exécution avec la version de production.

Quelqu'un peut-il m'expliquer pourquoi cela ne fonctionne pas ? :)

P粉350036783
P粉350036783

répondre à tous(1)
P粉037215587

Valeur de

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

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

Démo 1

Alternativement, vous pouvez utiliser une transformation réactive, qui ne nécessite aucune extension (pas besoin de .value )。不要导入 refcompulated,而是使用 $ref$compulated (aucune importation requise) :

sssccc

Démo 2

Un autre problème que vous voyez est lorsque l'attribut wildcardItem 更改时,items 未更新。您需要重构您的解决方案,使 items 成为基于附加到自定义事件项目的 wildcardItemcompulated :

sssccc

Démo 3

Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal