<div id="app">
<div class="p-5">
<h3>Computed 常見技巧 - 搜尋</h3>
<input type="search" v-model="search">
<ul>
<li v-for="item in filterProducts">
{{ item.name }} / {{ item.price }}
</li>
</ul>
<hr>
<p v-pre>{{filterProducts}}的內容</p>
{{filterProducts}}
</div>
</div>const App = {
data() {
return {
search:'',
products: [
{
name: '蛋餅',
price: 30,
vegan: false
},
{
name: '飯糰',
price: 35,
vegan: false
},
{
name: '小籠包',
price: 60,
vegan: false
},
{
name: '蘿蔔糕',
price: 30,
vegan: true
},
],
carts: [],
sum: 0,
}
},
methods: {
addToCart(product) {
this.carts.push(product)
},
},
computed: {
total() {
let total = 0;
this.carts.forEach(item => {
total += item.price;
});
return total;
},
filterProducts(){
return this.products.filter(item=>{
return item.name.match(this.search)
})
}
}
};
Vue.createApp(App).mount('#app');