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

Question

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

JS

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="" />

标签： javascriptformsvue.jsvuejs3vue-composition-api

Answer 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');