如何将 v-model 与 Vue 3 组合 API 一起使用？答案

【问题标题】：How to use v-model with Vue 3 Composition API?如何将 v-model 与 Vue 3 组合 API 一起使用？
【发布时间】：2021-12-14 09:59:25
【问题描述】：

如何使用 Vue3 Composition API 管理表单字段（v-model）中的反应性？我的意思是，目前像这样简单的东西在我的代码中不起作用>当我在输入字段中写入一些文本时，vue devtools 不会显示 ref 数据的任何更改：

import { ref, watch, reactive } from 'vue';

const vueapp = Vue.createApp({

  setup(props, {attrs, slots, emit}){
    
    const test = ref('');

    return {
      test
    }
  },

});

vueapp.mount('#form-panels');

HTML

<input name="test" v-model="test" id="name" type="text" value="" />

【问题讨论】：

你应该知道，在后台，在数据选项 API 中，Vue 实际上是使用reactive 来创建它与代理的反应性。所以，组合 API 只会改变你定义的方式，比如数据、方法等等。

标签： javascript forms vue.js vuejs3 vue-composition-api

【解决方案1】：

尝试此代码，一旦它应该可以工作

import { ref, watch, reactive, toRefs } from 'vue';

const vueapp = Vue.createApp({

  setup(props, {attrs, slots, emit}){
    
    const state = {test:''};

    return {
      ...toRefs(state)
    }
  },

});

vueapp.mount('#form-panels');

【讨论】：