Discover the magic of v-model in Vue 3 Composition API

Can someone help with managing reactivity in form fields using Vue3 Composition API? I'm having trouble getting my code to work correctly. When I type text into the input field, Vue devtools does not show any changes in the ref data. Here's a simple example of what I'm trying:

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

Answer №1

Give this code a try, it should function properly

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

const app = Vue.createApp({

  setup(props, {attrs, slots, emit}){
    
    const data = {message:''};

    return {
      ...toRefs(data)
    }
  },
});

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way in jQuery to show each element of an array one at a time with a space in an input field?

I have a large array filled with strings that I want to display one by one in a text field, automatically concatenated with a space bar. Below is my code: <script> x = 0; function abc() { for (i = 0; i < words[x].length; i++) { ...

Error message: Metro bundler is unable to access the properties of an undefined object (specifically, 'transformFile')

Having encountered a problem after updating my project to expo SDK 43, I have experimented with different LTS node versions (14.8.1, 16.1.3, and 17.0.1) without success. Interestingly, my colleagues using Macs with Intel chipsets do not face this issue, le ...

What could be causing an error in a scroll handler when using React's setState function?

Upon reaching the bottom of the page and scrolling back up, an error is thrown by React stating "TypeError: _this.setState is not a function" The scroll handler in question monitors the position of the client on the page. If the client is within the home ...

How can I identify when a form has been edited in order to update the database with those changes only?

Currently, I have a form with over 50 fields. While I've successfully implemented functionality for inserting, selecting, and deleting records, I'm struggling with updating a record. Specifically, if a user only updates one or two fields out of t ...

Calculating the total number of days in each month within a specified date range using PHP in a dynamic way

Thank you for taking the time to help me with my issue. For instance, if a user selects a date range from 10 Dec 2016 to 20 April, how can I calculate the number of days for each month within that range? For example, Dec=22 Days, Jan=31 Days, Feb=28 Days, ...

Is it feasible to simultaneously activate a modal and launch a URL in a separate tab when a link is selected?

I have 4 buttons, stylized to look like actual buttons, but only two of them are relevant: The first button opens a link in a new tab with its respective URL and the attribute target="_blank". The second button triggers a modal window containing text ...

What is the best way to enclose all succeeding elements with an HTML tag after a specific element?

In my project, I am integrating Vue 2 with Sanity.io and I am looking for a solution to wrap all elements that come after a specific element with an HTML tag, and then wrap this element along with the following elements with another HTML tag. For instance ...

Learn the process of invoking componentDidMount each time you switch between ListItems in React

After initializing the widget component to load various charts, it works correctly. However, when switching to another ListItem, the componentDidMount does not load the required data. This data is essential for the component to function properly. I noticed ...

Utilizing variables in GraphQL requests

UPDATE: see the working code below GraphiQL Query I have this query for retrieving a gatsby-image: query getImages($fileName: String) { landscape: file(relativePath: {eq: $fileName}) { childImageSharp { fluid(maxWidth: 1000) { base64 ...

Retrieving components of an array

I am looking to extract elements from an array, then store them in a new array and compare them to another array. The challenge is that I do not want to extract the elements in a specific order. I have tried using the .slice function for extracting element ...

Troubleshooting: Addressing the Issue of "Missing Product Attribute on Search Results"

Running into an issue while trying to map over a graphql query using an imported component. The data connection is set up correctly but encountering a problem with passing the data, resulting in the error message Missing product attribute on result. After ...

Utilizing express.js to access an HTML document

var express = require("express"); var fs = require('fs'); var sys = require('sys'); var app = express(); app.use(express.logger()); app.get('/', function(req, res){ fs.readFile('/views/index.html'); }); ap ...

Releasing Typescript 2.3 Modules on NPM for Integration with Angular 4

Although there are instructions available in Writing NPM modules in Typescript, they are outdated and there are numerous conflicting answers that may not be suitable for Angular. Additionally, Jason Aden has delivered an informative presentation on youtu ...

Ways to insert a line break using ajax

document.getElementById("msg").innerHTML += "<strike>b:</strike> "+ msgs[i].childNodes[1].firstChild.nodeValue; After retrieving the messages, I noticed that they are all displayed close to each other. Is there a way to display each message on ...

Implementing automatic selection mode in Kendo MVC grid

Seeking to modify the SelectionMode of a Kendo MVC Grid, I aim to switch from single to multiple using Javascript or JQuery upon checkbox selection, and revert back when the checkbox is unchecked. Is this feasible? Additionally, I am successfully binding a ...

Ways to provide information to an rxjs observer

It appears that most people find observers to be a piece of cake, but I personally struggle with them. I am trying to set up an observable that can receive a number input after it has been created, triggered by pressing a button. However, all the examples ...

Guide to incorporating CSS and JavaScript files in Django using Python

I am currently experiencing issues with loading only static css and Javascript in my Django project. The code I have included is successfully loading image files, but the css and js files are not loading. {% load staticfiles %} <html xmlns="http://ww ...

Enforce the splicing of the ng-repeat array with the utilization of track by

Our app incorporates a task list that can potentially grow to a substantial size. The main task list is accompanied by a sidebar, where selected tasks can be edited using a different controller (TasksSidebarCtrl instead of TasksCtrl which handles the list ...

Angular.js is throwing an error at line 13708, stating: "Error: [ng:areq] Function 'homeController' is missing or undefined."

Encountered an issue while trying to reach HomeController (module controller). Upon clicking the "home" link, an error appeared in the console stating that "HomeController is not a function; undefined. Could you advise on where I should register this cont ...

Settings for the packaging of web components

Is there a way to configure a web component in vue.config.js and separate the iconfont.css section when building? I am using the vue-cli-service build --target wc-async --name chat-ui src/views/Chat/Launcher.vue --report command to package the web compon ...