Discover the step-by-step process of populating pre-filled data in Vue.js input fields

I am facing an issue with my code in Vue.js. I am having trouble retrieving the value from an input field. Below is the code snippet that I am struggling with:

HTML Codes:

<div id="app">
  <div class="form-group">
    <input type="text" class="form-control" name="name" value="lorem" v-model="name"/>
     </div>
    <button class="btn btn-primary btn-block" v-on:click="sendData()">SIGN UP</button>
</div>

Vue.js codes:

<script>
var app = new Vue({
    el: "#app",
    data() {
        errors :{}
        return {

            input: {
                name: "",

               },
             }
    },
    methods: {
            sendData() {

                alert(this.name);
           }
        }
})

Any help or suggestions would be greatly appreciated. Thank you!

Answer №1

When setting data properties, use v-model="input.name" and then alert(this.input.name).

If you want to set a default value for the input, define the data property as {input:{name: 'lorem'}}.

var app = new Vue({
  el: "#app",
  data() {
    errors: {}
    return {

      input: {
        name: "", // or pre-fill with other default value like `lorem`

      },
    }
  },
  methods: {
    sendData() {

      alert(this.input.name);
    }
  }
})
<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="dcaaa9b99ceef2e9f2edea">[email protected]</a>/dist/vue.js"></script>
<div id="app">
  <div class="form-group">
    <input type="text" class="form-control" name="name" value="lorem" v-model="input.name" />
  </div>
  <button class="btn btn-primary btn-block" v-on:click="sendData()">SIGN UP</button>
</div>

Answer №2

Utilize only the v-model directive, without the value attribute:

<div  id = "app">
  <div class="form-group">
    <input
      type="text"
      class="form-control"
      name="name"
      v-model="name"
    />
  </div>
  <button
    class="btn btn-primary btn-block"
    @click="sendData"
  >
    SIGN UP
  </button>
</div>

<script>
  var app = new Vue({
    el: "#app",
    data () {
      return {
        name: 'lorem'
      }
    },
    methods: {
      sendData () {
        alert(this.name)
      }
    }
  })
</script>

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

Open the iframe link in the main window

As a newcomer to this platform, I am trying to figure out how to make a link open in the parent page when clicking a button within an iframe. Currently, my code opens the link in a new window. <html> <body> <form> <div class ...

What is the best way to implement window.load in React Native?

I'm encountering an issue with a simple button on my page in Expo/React Native. When I try to navigate to a new page using window.open upon clicking the button, I receive an error message saying "undefined is not a function." Although I am utilizing ...

Can a shape similar to an inverted circle be created using CSS and jQuery?

I'm stumped on how to create an inverted circle in the corners. I've included a picture for reference. https://i.stack.imgur.com/jeNdh.jpg Is it feasible to achieve this effect using CSS3 or maybe jQuery? ...

Using AJAX and PHP to redirect a PHP page once specific conditions are satisfied

Hello, I am currently facing an issue and I could use some guidance with Ajax as I am still learning how to work with it. The situation is this: I have a webpage that undergoes a refresh every 7 seconds using Ajax and Javascript. During each refresh, one ...

The subsequent page fails to load. Issue with the pagination feature

I'm currently stuck trying to implement pagination in my task and it's not functioning as expected. My approach involved creating two buttons with click events attached, along with a data property that changes when the buttons are clicked. This ...

Preserving scroll position during page navigation in Next.js

Currently, I am working on a website using the Next.js boilerplate. Here is the routing code that I am using: import Link from 'next/link' <Link href={{ pathname: '/some-url', query: { param: something } }}> <div> ...

I am attempting to display the number of guilds that my bot is currently in through a status update feature, however, the information does not seem to be updating

I need help creating a dynamic status for my Discord bot that updates to show the number of servers the bot is in whenever it joins a new server. This is the current code I have: bot.on('ready', () => { console.log(`${bot.user.username} is n ...

"Learn the technique of adding a comma after each object and transforming it into an array using JavaScript in React JS

Is there a way to add commas after each object and transform it into an array? Below is the response data: {"url":"example.com/john","age":"32"}{"url":"example.com/mike","age":"42& ...

Guide to animating camera movement to the top using three.js

Is it possible to tween the camera to a top position with a focus on an object in three.js using tween.js? The camera tweens to the right spot perfectly. Please refer to this codepen: http://codepen.io/anon/pen/ObQxjV?editors=1111 Click here for image re ...

Add a string to the beginning of the JSON data before displaying it

Upon receiving JSON data through an AJAX call, the format of the data is structured as follows: data[0].scores.sadness The term 'sadness' in the above example represents one of the eight emotions. Instead of printing out individual emotions lik ...

Error: Unable to locate the relative module: vue-lottie

Following a new installation using vue-cli (version 3.0.0-rc.5), I am encountering difficulties in accessing the path to the lottie module. Would it be advisable to make adjustments to the configurations? ./lottie.vue in ./node_modules/cache-loader/dis ...

Comparing dates with Firestore timestamp in queries using TypeScript: A comprehensive guide

I have been struggling with comparing dates from my calendar app to dates stored in Firestore. The issue arises because Firestore returns timestamps, and I need to compare them to regular Date objects. Is there a workaround for this problem? Can something ...

How can you achieve three layers of nested quotes in Dynamic HTML?

Working on an app that utilizes JQuery and JQTouch for iOS. The issue I'm facing involves dynamically generated HTML lists where the user clicks a row that needs to be highlighted. However, achieving this has proven tricky due to nesting 3 sets of quo ...

Creating a text file in Node.js using nodepad formatting

Could anyone assist me with formatting text in a Node.js file to be written to Notepad? Here's the code I'm currently using: const fs = require('fs'); fs.writeFile('write.txt', '', err => {}); var text = [ ...

Send the JSON output of a MySQL query as an argument to my EJS template in a Node.js/Express application

I've been using res.json(rows) to display my users on the screen, but now I want to pass the object obtained from the query to an ejs file for display. However, when I try to do this as shown in my code below, the passed object becomes a string and I& ...

Ways to show alternative data from a database in Laravel 8

I am working on a project where I need to display additional data based on the option selected from a dropdown menu populated from a database. Can anyone guide me on how to achieve this using javascript or jquery? https://i.stack.imgur.com/k3WLl.png Belo ...

Development versions of npm libraries

Lately, I came across a library called react-3d-components that offers some d3 react components with basic charts. It's an impressive collection of components. However, when trying to access the source code due to incomplete documentation, I found my ...

I am facing an issue with Angular 14 and Webpack 5, where certain unnecessary nodejs modules seem to be hindering me from successfully serving

I have recently started working on a cutting-edge Angular 14 application. My current node version is v14.20.0, and npm version is 8.17.0. Despite my best efforts, I seem to be facing an issue with multiple nodejs dependencies being included in my project ...

`Problem encountered in establishing a database table through jQuery ajax`

I am completely new to utilizing jQuery and ajax. Currently, I am experimenting with creating a table on my local MySQL server using a JavaScript file that sends SQL statements to a .php file for execution. Here is the code in the .js file: function exec ...

What's the best way to implement image size and type validation, specifically for .jpg and .png files, using Multer?

When using multer to receive files from the FrontEnd, I need to validate the image size to ensure it's less than 1MB. Additionally, I want to restrict the accepted file types to .jpg, .jpeg, and .png only. const multer = require("multer"); c ...