Accessing form data using Vue on submit

I'm working on a project that involves creating a form with a single input field and saving the data to a database. The technology I am using is Vue.js.

Here is the template I have designed:

<form class="form-horizontal" @submit.prevent="submitBid">
        <div class="form-group">
            <label for="bid"></label>
            <input name="bid" type="text">
        </div>
        <div class="form-group">
            <input class="btn btn-success" type="submit" value="Submit!">
        </div>
    </form>

This is how my component looks like:

export default {        
    props: ['veiling_id'],
    methods: {
        submitBid(event) {
            console.log(event);


        },
    },
    computed: {

    },
    mounted(){

    }
}

I need help in figuring out how to access and retrieve the value of the input field within the submitBid function.

Your assistance on this matter would be greatly appreciated.

Answer №1

Associate a value with it using v-model:

<input name="binding" type="text" v-model="binding">
data() {
  return {
    binding: null,
  }
},
methods: {
  saveBinding() {
    console.log(this.binding)
  },
},

Alternatively, append a ref to the form, and retrieve the value through the form element in the saveBinding method:

<form ref="myForm" class="form-horizontal" @submit.prevent="saveBinding">
methods: {
  saveBinding() {
    console.log(this.$refs.myForm.binding.value)
  },
},

Check out this demonstration on jsFiddle.

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

The failure to build was due to the absence of the export of ParsedQs from express-serve-static-core

Encountered the error message [@types/express]-Type 'P' is not assignable to type 'ParamsArray'. Resolved it by installing specific packages "@types/express": "^4.17.8", "@types/express-serve-static-core": ...

Is there a way to send decimal values from a view to a controller using Vue.js?

I am encountering an issue when trying to pass decimal values from the view to the controller using Vue.js. Only decimal values seem to be arriving as NULL, while integer or string values work fine. Below is the code snippet: salvarProdutos: function ( ...

Error: Unable to access the 'comments' property of a null value

Encountering an issue when trying to add comments to a post, resulting in the error message: TypeError: Cannot read property 'comments' of null Post routes: router.post("/", async (req, res) => { console.log(req.params); Post.findById(r ...

Execute button click automatically upon page loading in AngularJS

I'm trying to figure out how to automatically trigger a button click on an AngularJS page when the page loads based on a querystring value. In a traditional asp.net web forms page, I could easily handle this scenario by calling Button1_Click(sender,e) ...

Error has occurred: Unable to assign a value to an undefined property using axios

Within my Vue.js component, I am utilizing axios to fetch a JSON array consisting of `joke` objects: <template> <div id="show-jokes-all"> <h2>Showing all jokes</h2> <div v-for="joke in jokes"> ...

Setting up PostCSS nesting with Vite: A beginner's guide

Here are the steps I have taken so far: I installed postcss-nesting using npm install postcss-nesting --save-dev I configured vite.config.js as follows: import { fileURLToPath, URL } from 'url'; import { defineConfig } from 'vite&apo ...

Exploring the power of Laravel9 and Vue2 collaboration

I followed the steps below to set up Laravel and Vuejs: Ran the command: laravel new blog Installed laravel/ui using composer: composer require laravel/ui Used php artisan ui vue command Installed vue-router: npm install vue-router Executed npm ...

What could be causing my div link to redirect to different content instead of the intended destination?

When creating a div to provide information about a course, including the price and a "Take Class" button that links to the purchase page, I encountered an issue where the link extends beyond the intended area. @import url(https://fonts.googleapis.com/cs ...

Exploring different methods to locate a random ID using XPATH, CSS path, and selector while conducting Selenium c# testing on a CMS tool

Issue: Hey there, I'm currently working on testing a CMS tool with selenium in C#. The problem I'm facing is finding a suitable selector for a small drop-down button due to the random generation of IDs for all selectors. Every time the script run ...

Using Knockoutjs to fetch and display server-side data within the MVC framework

My goal is to initialize my knockoutjs viewmodel with data from the server. In my ASP.Net MVC project, I achieve this by passing a mvc viewmodel to the view: public ActionResult Edit(int cvId) { CV cv = repository.FindCV(cvId); //auto mapper mapp ...

How to identify the position of an element while scrolling using JavaScript/jQuery

Trying to determine the distance between an element and the top of the window document. After initial value is retrieved during scroll event, it remains unchanged. How can this value be continuously tracked as the page scrolls? JS: $(function() { $(wi ...

Ways to verify that a ray does not intersect the face further

My approach involves creating cubes and rectangles on my scene with userData that initially have all 6 parameters set to "false". I then cast a ray from each face and if it intersects with another object's face, I set that specific face's paramet ...

Modify the Primevue Class p-accordion-header only under certain conditions

I'm currently facing a challenge with customizing the styling of the primevue component class p-accordion-header based on the status of the rendered component determined by the variantNumber. Here's a snippet of my code: <Accordion :multiple= ...

Creating recursive functions to produce a unique variable without any repetitions

Currently utilizing MongoDB and Express in my project. I have a post endpoint that generates a random name for the name field. Everything is working as expected except when I encounter a duplicate name. I need to check if the name already exists in the d ...

Preventing page re-rendering with redux when a condition is not met

I am currently working on a page that features a question paper with multiple options and a button to navigate to the next question. import Grid from "@material-ui/core/Grid"; import Typography from "@material-ui/core/Typography"; import React, { useEffec ...

Make sure to wait for the scrollTo function to finish before executing any other commands

I have a sleek scrolling directive in my AngularJS app that automatically scrolls to the bottom of the page. I want this command to execute only after the scrolling has completed. Currently, I trigger the scroll function and then use $('#comment-input ...

How can Vue listen for a Vuex commit?

Is there a method to detect when a Vuex commit occurs without having to monitor specific property changes associated with the commit? Simply knowing if a commit has taken place? I am working on a Filter component that I plan to include in an NPM package. ...

The AJAX request cannot be sent until the previous request has completed

I've encountered an issue where my AJAX request gets stuck until the previous non-AJAX request is completed. On my webpage, I have a video playing using HTML5 and I'm trying to make an AJAX call to the server simultaneously. Here are the detail ...

Could the absence of an external style sheet for CSS be hindering the execution of my code?

A generous Stack Overflow user provided me with the code you see here and their JSFiddle can be accessed at http://jsfiddle.net/f18513hw/. The code functions properly in JSFiddle. I copied and pasted the code into my Textpad, saved it in my htdocs folder o ...

What is the correct way to generate a normal map using THREE.js?

Experimenting with the Normal map Ninja demo, I attempted to apply it to a cube in my scene using the most recent version of Three.js from the development branch: // Setting up common material parameters var ambient = 0x050505, diffuse = 0x331100, specul ...