computed get set

by imall

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
    <h1> {{ author.name }}出的書</h1>
    <ul>
        <li v-for="book in author.books">{{book}}</li>
    </ul>
    <div> 是否還有庫存： {{ hasBook }} </div>

    <button @click="changeBookCount"> 將書本數量歸零</button>
</div>

JavaScript

const { createApp, ref, computed } = Vue;
createApp({
    setup() {
        const author = ref({
            name: 'John Doe',
            books: [
                'book1：JavaScript',
                'book2：Vue',
            ]
        })
        
        // 這個方法用來「寫入」計算屬性
        const changeBookCount = () => {
            hasBook.value = 0;
        }
        // 改寫 只能「讀取」的計算屬性，讓這個「變數」能讀取
        const hasBook = computed({
            get:()=>author.value.books.length > 0 ? true : false,
            set:(value)=>{
            	author.value.books.length = value
            }
        })
        
        // 一樣記得，模板有用到的變數都要回傳出去
        return { author, hasBook,changeBookCount }
    },
}).mount("#app");