我有一个名为 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。
有人可以指导我为什么它不起作用吗？ :)
compulated()返回一个ref，因此您需要使用.value来解开ref的值：document.addEventListener('CustomEvent', function (event) { items.value = [ ...event.detail.items, //wildcardItem, ❌ wildcardItem.value, ✅ ]; });演示 1
或者，您可以使用反应性转换，这不需要任何展开（不需要
.value）。不要导入ref和compulated，而是使用$ref和$compulated（无需导入）：演示 2
您看到的另一个问题是，当
wildcardItem更改时，items未更新。您需要重构您的解决方案，使items成为基于附加到自定义事件项目的wildcardItem的compulated属性：演示 3