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

Does JSON.Stringify() change the value of large numbers?

My WCF service operation returns an object with properties of type long and List<string>. When testing the operation in a WCF application, everything functions correctly and the values are accurate. However, when attempting to call the service using ...

View a pink map on Openlayers 2 using an iPhone

I am currently working on a project where I am trying to track my location using my smartphone and display it on a map. To achieve this, I am utilizing openlayers 2. However, I am encountering an issue. When I implement the code below in a Chrome Browser ...

Vue.js causing issues with jQuery data table

Utilizing jQuery data-table within Vue.js in a laravel project has presented an issue for me. Although the data loads successfully into the data-table, there seems to be a problem with retrieving the data after it has been loaded. Specifically, the first r ...

The Transforming Popup completely shattered the static background

Recently, I came across a fantastic morphing modal script that I decided to incorporate into my website. Everything seemed to be working perfectly until I realized that after closing the window, my background was completely broken. If anyone has experienc ...

Creating a variable by utilizing $index values within two nested v-for loops

For my project, I am attempting to organize the days of a month into a table using 2 v-for loops. To simplify my code, I am considering creating a t_index variable that would be equal to ((r_index - 1) * 7 + c_index) - 2, but I am unsure how to implement ...

Parsing error: 'Unexpected token' found in JSON while attempting to access an external file

Currently working on implementing backbone for a new project along with underscore, requirejs, jquery, and bootstrap. Things are progressing smoothly as I aim to include static survey question data into one of the data models. { "defaultOptions": { ...

What's the best way to mount multiple Vue Single File Components?

Suppose you have an index.js file structured like this: new Vue({ el: '#app', components: { 'hello': Hello, 'counter': Counter, 'goodbye': GoodBye } }); And your index.html file ...

Implementing Laravel's functionality for calculating average ratings with the help of jQuery

In my database, I have two tables named Users and ratings. The Users can give ratings to consultants, and the Ratings table structure is as follows: User_id | consultant_id | rating --------------------------------- 1 1 2 ...

creating a multi-page form using HTML and JavaScript

I need help creating a multi-page form with a unique tab display. The first page should not have a tab-pill, while the following pages should display tabs without including the first page tab. Users can navigate to the first page using only the previous b ...

Is there a way to launch Visual Studio Code using a web browser?

Is there a way to launch "Visual Studio Code" automatically upon clicking a button on my website? ...

Why is it important to have specific property names?

Here is some code and HTML for triggering a radio button. It seems to work fine without any issues, but I'm wondering if the presence of a name property is necessary. When I remove the name property, it stops working. Can someone explain why? <inp ...

Error encountered when attempting to export a TypeScript class from an AngularJS module

In my application using Angular and TypeScript, I have encountered a scenario where I want to inherit a class from one module into another file: generics.ts: module app.generics{ export class BaseClass{ someMethod(): void{ alert(" ...

Ways to execute a script from termly on NextJS using JSX

I've been utilizing termly to assist in creating legal terms for a website I'm developing. They provided me with some HTML containing a script, but I am struggling to get it to execute on a page in JSX. I attempted to use both Script and dangerou ...

How can I enable a button in a React application when the text input is not populating

For my Instagram MERN project, I have implemented a Comment box feature for users. The Post button starts off disabled and becomes enabled when text is entered. However, despite entering text, the button remains disabled, preventing submission. Below is th ...

What is the most efficient way to save a document in mongoose based on a specific user's

Is there a way to ensure that when saving a template, it is associated with the user id? I have added a reference to the templateSchema for the User. User.model.js var UserSchema = new mongoose.Schema({ _id: { type: String, required: true, index: {uniq ...

Logging in with oidc-client and IdentityServer4 on separate domains

I am currently working on a VueJs application hosted on localhost which utilizes the oidc-client.js library for logging in to an IdentityServer4 server located in a production environment on another domain. Upon successful login, I am redirected back to t ...

The configuration error occurred for the `get` action due to an unexpected response. Instead of an object, an array was received

Despite numerous attempts, I am struggling to find a solution that works for me. In my Courses controller, I am using the Students service and Staff service to access my staff and student objects. My goal is to retrieve the staffs and students objects in o ...

Error: You forgot to close the parenthesis after the argument list / there are duplicate items

I have already tried to review a similar question asked before by checking out this post, but unfortunately, I still couldn't find a solution for my problem. Even after attempting to add a backslash (\) before the quotation mark ("), specificall ...

jQuery failing to append code after being removed

I need some assistance with an issue I've run into while using jQuery's .remove(). Here is a snippet of code that showcases the problem: $( '.video-button span.glyphicon-play' ).click(function() { $( '#video-player' ).ap ...

What is the best method to create Promise API synchronously?

When it comes to testing with NodeJS, I rely on selenium-webdriver. My goal is to streamline the selenium-webdriver API by making it synchronous, which will result in more concise tests. The method getTitle() is used to retrieve the title of the current p ...