Давайте посмотрим на следующий фрагмент кода в vue.js 3,
<template>
<div>
<h2>Computed Total - {{getPrice()}}</h2>
</div>
</template>
<script>
export default {
name: "ComputedProperties",
data(){
return{
items: [
{
id: 1,
title: 'TV',
price: 100,
},
{
id: 2,
title: 'Phone',
price: 200,
},
{
id: 3,
title: 'Laptop',
price: 300
}
]
}
},
computed: {
getPrice(){
return items.reduce((total, curr) => (total = total + curr.price), 0)
}
}
}
</script>
После запуска этого кода он показывает error 'items' is not defined no-undef
Как мы знаем, вычисляемому свойству не нужно объявлять какой-либо аргумент. Тогда что не так с кодом?





С вашим кодом есть несколько проблем:
() - это свойство, а не функция.<h2>Computed Total - {{ getPrice }}</h2>
data, computed или methods при использовании в части script компонента Vue должны иметь ссылку на this ... например, this.itemscomputed: {
getPrice() {
return this.items.reduce((total, curr) => total + curr.price, 0)
}
}