Guide on transferring Vue form input data to Adonis controller through an http request

I have a Vue component that prompts the user to enter their email address. I've utilized v-model for data binding.

<template>
    <input v-model="email" type="text" placeholder="Email" />
    <button class="tiny">Send</button>
</template>
<script>
    export default {
        data: function () {
            return {
                email: ''
            }
        }
    }
</script>

In my MailController within Adonis, I need to be able to retrieve the user's inputted email address. This is what I imagine the code looking like:

'use strict';

class MailController {
    *mail (request, response) {
     const email = request.input('email');
    }
}

What would be the correct approach to retrieve the value of email?

Answer №1

1.) npm install vue-resource --save

2.) Update your main Vue JavaScript file

var Vue = require('vue');
var VueResource = require('vue-resource');

Vue.use(VueResource);

3.) Modify your component file as shown below

<template>
    <input v-model="email" type="text" placeholder="Email" />
    <button @click="submit()" class="tiny">Send</button>
</template>

<script>
    export default {
        data: function () {
            return {
                email: ''
            }
        },

        methods: {
            submit: function() {
                this.$http.post('/your-url', {email: this.email})
                    .then(
                        (response) => {
                            console.log(response);
                        },

                        (error) => {
                            console.log(error);
                        }
                    );
            }
        }
    }
</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

Ways to avoid automatic error correction when running npm lint?

Utilizing the Vue CLI, I developed a Vue3 app with a Prettier/Eslint configuration. Upon making changes to the main.ts file as shown below: import { createApp } from "vue"; import App from "./App.vue"; import router from "./router& ...

Suggestions for improving the smoothness of the Bootstrap toggle hide/show feature

Recently completed my bootstrap toggle hide/show feature and everything seems to be functioning correctly, except for the transition between the different contents. The borders appear jagged and not smooth when activating the toggle. I suspect there may b ...

The v-autocomplete feature in vuetify doesn't allow for editing the text input after an option has been selected

Link to code on CodePen: CodePen Link When you visit the provided page and enter "joe" into the search box, choose one of the two Joes that appear. Try to then select text in the search box or use backspace to delete only the last character. You will no ...

TypeScript - Issue with generic function's return type

There exists a feature in typescript known as ReturnType<TFunction> that enables one to deduce the return type of a specific function, like this function arrayOf(item: string): string[] { return [item] } Nevertheless, I am encountering difficulti ...

When trying to implement a dark/light theme, CSS variables may not function properly on the body tag

Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below: #light{ --color-bg: #4e4f50; --color-bg-variant: #746c70; --color-primary: #e2 ...

Easy Steps to Simplify Your Code for Variable Management

I currently have 6 tabs, each with their own object. Data is being received from the server and filtered based on the tab name. var a = {} // First Tab Object var b = {} // Second Tab Object var c = {} // Third Tab Object var d = {}// Fou ...

When the mouse hovers over it, show text instead of an icon on a React Material UI button

I'm currently working on a project that involves using material ui buttons. Initially, the add button only displays the + icon. Now, I want to change the button content from the icon to the text "CREATE ITEM" when the mouse is hovered over it. Check ...

Subcomponent in React is not rendering as expected

I have a primary React component with a subcomponent named AttributeInput. To prevent redundancy in my code, I moved some of the logic from the main component to a method within AttributeInput. My attempt at referencing this code looks like this: {this.s ...

Creating an array object in TypeScript is a straightforward process

Working on an Angular 4 project, I am attempting to declare an attribute in a component class that is an object containing multiple arrays, structured like this: history: { Movies: Array<Media>, Images: Array<Media>, Music: Array<Medi ...

Can a single node_module folder be shared across multiple projects within a repository?

Imagine we have a central repository named REPO containing multiple grunt projects. Now, let's say we want to structure it like this: ROOT -- bower_components -- node_modules -- project_1 -- project_2 -- project_3 etc The current issue is that I nee ...

Leveraging jQuery to manipulate an SVG file

jQuery is designed to work within HTML pages that contain JavaScript code. While SVG and HTML both use the same DOM Level 2, SVG is XML-based and employs ECMAScript. What potential issues could arise from utilizing jQuery with SVG? Is it more advisable t ...

I am trying to retrieve the class name of each iframe from within the iframe itself, as each iframe has a unique class name

My index HTML file contains multiple Iframes. I am trying to retrieve the class names of all iframes from inside an iframe. Each iframe has a different class name. If any of the iframes have a class name of 'xyz', I need to trigger a function. I ...

Is utilizing the "sandbox attribute for iframes" a secure practice?

lies an interesting update regarding a technique mentioned in Dean's blog. It seems that the said technique may not work well in Safari based on comments received. Therefore, there is a query about its compatibility with modern browsers, especially Sa ...

Align the text field value with the corresponding tooltip content in Vuetify

<v-col class="d-flex align-center"> <v-tooltip bottom> <template v-slot:activator="{ on }"> <v-text-field v-on="on" :value="info.payeeNo" den ...

Is there a way to verify the existence of an Array Field?

For JavaScript, the code would look like this: if (array[x] != undefined && array[x][y] != undefined) { array[x][y] = "foo"; } Is there an equivalent simple method for achieving this in Java? I have tried checking if the field is null or no ...

Returning to the location in the file where the redirect function was invoked in the Express framework

In my current project, I am working on an Express app and facing a challenge. I need to redirect after collecting data in a function, complete the redirect, return the data, and then resume from where I left off. For instance: > res.redirect('my/ ...

When using $resource.save, it returns a "Resource" instead of just an ID

For some reason, I am struggling with a seemingly simple task and cannot find a solution by going through documentation or other Angular related questions on SO. I may not be the brightest, so I could really use some help here as I am feeling stuck. Take ...

Automatically substitute a term with a clickable link

Is there a way to automatically turn every word into a hyperlink? I have specific words that need to be linked. For example, I want Ronaldo (Only for the First Appearance) to link to a certain page. However, my attempted method did not work. <p> Ro ...

JavaScript makes it easy to streamline conditions

Can someone help me simplify this repetitive condition? if (this.get('fileUrl')) { const isUnsplash = this.get('fileContainer.asset_kind') === 'UnsplashAsset'; return Asset.create({ url: this.get('f ...

Add fresh material to the bottom of the page using Javascript

Hey there, I'm having a bit of trouble with my page where users can post their status. I want the new posts to appear at the bottom after the older posts when the user presses the button. Currently, Ajax is placing all new posts at the top of the old ...