老师我这样子提取分离出去后，如何让文本框的值清空喃

来源：2-8 使用 Composition API 开发TodoList（2）

慕函数0445997

2023-02-01 15:23:49

我这样子把代码分离出去，点击提交发送出去，我想清空文本框的值，发现没法清空了

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
    <div id="root"></div>
    <script>
        const listEffect = () => {
            const {reactive} = Vue;
            const list = reactive([1,2,3]);
            const handleSubmit = (item) => {
                list.push(item);
                item.value = '';
            }
            return {list, handleSubmit}
        }

        const inputEffect = () => {
            const {ref} = Vue;
            const inputValue = ref('123');
           
            const inputChangeHandle = (e) => {
                inputValue.value = e.target.value
            }
            return {inputValue, inputChangeHandle}
        }

        const app = Vue.createApp({
            setup(){
                const {inputValue, inputChangeHandle} = inputEffect();

                const {list, handleSubmit} = listEffect();

                return {
                    list,
                    inputValue,
                    inputChangeHandle,
                    handleSubmit
                }
            },
            template:`
                <div>
                    <div>
                        <input :value="inputValue" @input="inputChangeHandle"/>
                        <button @click="() => handleSubmit(inputValue)">提交</button>    
                    </div>    
                    <ul>
                        <li v-for="(item,index) in list" :key="index">{{item}}</li>    
                    </ul>
                </div>
            `,
        });

        app.mount('#root')
    </script>
</body>
</html>

写回答

1回答