I have a computed property called wildcardItem
which works when using a development build, but when I run a production build (mix --product
) the property No more updates.
I'm using Laravel Mix to compile the 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, });
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>
I also cannot see console.log
when running with the production build.
compulated()
returns aref
, so you need to use.value
to unpack the value ofref
:Demo 1
Alternatively, you can use a reactive conversion , which does not require any expansion (no
.value
is required). Do not importref
andcompulated
, instead use$ref
and$compulated
(no import required):�