我有一個名為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
的值:示範 1
#或者,您可以使用反應性轉換,這不需要任何展開(不需要
.value
)。不要導入ref
和compulated
,而是使用$ref
和$compulated
(無需導入):�