Present information using Vue.js

Struggling to display just the name from the request object in my form using JavaScript. I'm new to working with JS and need some guidance.

I attempted to use {{ request.name }}, but it's not functioning as expected. When I tried {{request}}, it displayed all the data instead of just the name.


const app = new Vue({
      el:'#valuation-request',
      data() {
        return {
          step:1,
          request:{
            name:null,
            industry:'{{ $company->industry }}',
            valuation_date:null,
            similar_comp:null,
            total_raised:null,
            sales_transactions:null
          }
        }
      },
      methods:{
        prev() {
          this.step--;
        },
        next() {
          this.step++;
        }
      }
    });

Answer №1

If the variable name contains a value, it will be displayed exactly as entered. If the variable is null, nothing will appear on the screen.

const app = new Vue({
      el:'#valuation-request',
      data() {
        return {
          step:1,
          request:{
            name: null,
            industry:'{{ $company->industry }}',
            valuation_date:null,
            similar_comp:null,
            total_raised:null,
            sales_transactions:null
          }
        }
      },
      methods:{
        prev() {
          this.step--;
        },
        next() {
          this.step++;
        }


      }
    });
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="valuation-request">
  {{request.name}}
  <hr>
  Name: <input type="text" class="uk-input" name="name" v-model="request.name" id="name" placeholder="e.g. John Doe" required>
</div>

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

Ensure the accuracy of submitted form information

I am seeking to enhance the validation process for my form, which is already using jquery.validate.min.js for validation. I want to incorporate another layer of validation by making an ajax call to my MySQL database to check if the email address provided i ...

Displaying a div when hovering over it, and keeping it visible until clicked

I want to display a div when hovering over a button. The shown div should be clickable and persistent even if I move the cursor from the button into the shown div. However, it should be hidden when moving out of the entire area. I'm unsure about how ...

What is the best way to transfer the value of a <span> element to a different <div> using jQuery or JavaScript

Is there a way to move or copy the price and insert it into the <div class="info"> using jQuery? The code I'm currently using is returning an unexpected result of "102030". jQuery(document).ready(function($) { $(document).ready ...

Error encountered: Attempting to render an object as a react component is invalid

I am attempting to query data from a Firestore database. My goal is to retrieve all the fields from the Missions collection that have the same ID as the field in Clients/1/Missions. Below, you can find the code for my query: However, when I tried to execu ...

Exploring the directories: bundles, lib, lib-esm, and iife

As some libraries/frameworks prepare the application for publishing, they create a specific folder structure within the 'dist' directory including folders such as 'bundles', 'lib', 'lib-esm', and 'iife'. T ...

Sending form using AJAX without the use of a button

I am facing an issue while trying to submit a form using AJAX without a submit button. Everything works perfectly when I use a submit button, but fails when I try to trigger the form submission by clicking on something else. Despite searching for a soluti ...

What is the best practice for incorporating CSS and JavaScript files into a PHP template?

I've created a basic template for my PHP website, but I'm struggling to find the best way to include my CSS and JavaScript files. Take a look at my index.php file below: <?php include'core/template.php'; $temp=new Template(); $sett ...

What's the reason "console.log()" doesn't function on this particular site?

When I go to https://www.google.com/ and enter console.log("Hello world!") into the Chrome DevTools console, it prints "Hello world!" as expected. However, when I try the same command on , nothing shows up in the console. Why doesn't it work for this ...

Creating a mandatory 'Select' component in Material UI with React JS

Is there a method to show an error message in red until a choice is selected? ...

How can I reveal a concealed div by clicking on a separate div (button) in Vue?

I need help displaying the loading div even after changing the hidden value on click of a confirm button. Can you please review my code and suggest any improvements? Below is the code snippet: <div class="form-btns"> <button type=&quo ...

Connecting a href link to a TAB

Check out this useful CODE example I am using. I have a webpage with links that have href attributes. Now, I want to link these pages to another page and have them automatically open a specific tab when clicked. Is this possible? Here are the links on th ...

Is there an issue with this npm version number?

I am trying to include the following dependency in the package.json file of my npm package: "redux-saga": "^1.0.0-beta.0 || ^0.16.0"`. When I install this package in a project that already has "redux-saga": "^1.0.0-beta.1 I am expecting npm/yarn to on ...

Generate JSON on-the-fly with ever-changing keys and values

I am new to coding and I'm attempting to generate JSON data from extracting information from HTML input fields. Can anyone guide me on how to create and access JSON data in the format shown below? { Brazilians**{ John**{ old: 18 } ...

Creating a custom component results in an extended duration to 'eliminate' its children

1I am currently facing an issue with a time-table component created using vue.js. It contains approximately 200 nested child timeline components, making it quite complex (I wanted to share an image but lacked the reputation to do so). The main problem lie ...

Updating a secondary state array is possible by modifying a JavaScript array with setState()

In my React application, there is a grid where names can be selected. When a name is chosen, the app retrieves corresponding data from a database and displays rows of information related to that particular name. Each row is represented as an object stored ...

How can you show a green check mark next to an input field in AngularJS after inputting valid data?

I am diving into the world of AngularJS and Angular Material with my web application. As a beginner in AngularJS and Angular Material, I need some help. My current task is to display a green checkmark next to an input field only when valid data is entere ...

How to delete a specific element from the DOM using its ID in JavaScript

I am facing a challenge in removing an element from the page dynamically without refreshing using JavaScript. The script I have written successfully deletes the record from the database, but I need assistance in removing the container element based on it ...

My node.js code is not producing the expected result. Can anyone point out where I may be going wrong?

I've been working on a BMI calculator where I input two numbers, they get calculated on my server, and then the answer is displayed. However, I'm having trouble receiving the output. When I click submit, instead of getting the answer, I see a lis ...

The internal style and script specified within the <head> section are not being rendered

Within my Joomla website using the T3 template, I inserted the following "Custom Code" just before the closing </head> tag: <style type="text/stylesheet"> div.t3-sidebar.t3-sidebar-right{ background: #F8F8F8 none repeat scroll 0% 0%; ...

Using AngularJS and ServiceStack webservice, perform the "get('url')" operation

I'm completely new to AngularJS and I'm attempting to retrieve some JSON items from a webservice I quickly set up using ServiceStack. When I enter the URL in the browser, I can see the JSON object without any issues. However, for some reason Angu ...