Wenn ich eine Eigenschaft namens wildcardItem
的计算属性,该属性在使用开发构建时有效,但当我运行生产构建 (mix --product
habe, wird die Eigenschaft nicht mehr aktualisiert.
Ich verwende Laravel Mix, um den Code zu kompilieren.
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>
Ich kann console.log
auch nicht sehen, wenn ich mit dem Produktions-Build laufe.
Kann mir jemand erklären, warum es nicht funktioniert? :)
compulated()
返回一个ref
,因此您需要使用.value
来解开ref
的值:演示 1
或者,您可以使用反应性转换,这不需要任何展开(不需要
.value
)。不要导入ref
和compulated
,而是使用$ref
和$compulated
(无需导入):演示 2
您看到的另一个问题是,当
wildcardItem
更改时,items
未更新。您需要重构您的解决方案,使items
成为基于附加到自定义事件项目的wildcardItem
的compulated
属性:演示 3