组合式api表单元素绑定

我想用组合式api实现表单元素的双向绑定，但是复选框和单选框这个地方实现不了，然后我拿课上的demo试，发现他放在定时器里nameObj.name更新时才能更新，这是为什么，正常用组合式的话表单元素怎么双向绑定

下面是练习代码

<!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>
    <!-- 引入vue的原码 -->
    <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
    <div id="root"></div>

    <script>
        // ref, reactive 响应式的引用
        // 原理：通过proxy对数据进行封装，当数据变化时，触发模板等内容的更新
        // ref 处理基础类型的数据
        // reactive处理非基础类型的数据
        const app = Vue.createApp({
            template: `
                <div>name:{{nameObj.name}}</div>
                {{show}} <br />
                tom<input type="checkbox" v-model="show" value="tom" name="check"/>
                jerry<input type="checkbox" v-model="show" value="jerry" name="check"/>
            `,
            setup(props, context) {
                const { reactive } = Vue;
                const nameObj = reactive({ name: 'ppp' });
                const show = reactive([]);
                setTimeout(() => {
                    nameObj.name = 'ggg';
                }, 2000);
                return { nameObj, show }
            }
        });

        const vm = app.mount("#root");
    </script>
</body>

</html>

宣与慕 2022-11-21

源自：vue基础入门（下） 2-1 Setup 函数的使用

收起

1回答

宣与慕提问者 2022-11-21 14:03:48

我把show改成用ref包裹就好使了，这是为什么
课程里不是说ref是处理基本数据类型，reactive处理非基本吗

收起回答

卡布琦诺 #1

同学你好，关于同学的问题解答如下：
1、表单的双向数据绑定跟放不放在定时器里面是没有关系的，课程里老师放在定时器里面，是为了让数据自己在一定的时间后自动更新数据，而不需要手动操作。
2、同学说的表单的双向数据绑定实现不了，是因为将表单数据处理成响应式数据所使用的函数不正确导致的。两个表单的文字“tom”和“jerry”是普通的字符串，本质上属于基础类型，因此这里需要使用ref处理成响应式数据，再绑定渲染到页面上（有多个复选框，绑定到同一个数组）。
以下是单独实现复选框表单双向数据绑定的代码示例：
希望可以帮到你，祝学习愉快！

2022-11-21 16:41:30