When Vuejs returns an empty string instead of the value 'null'

Struggling with displaying empty strings on my website for customers who haven't filled in address 2 or address 3 information. When a customer creates an account, they can skip any irrelevant fields like this:

business name
address 1
address 2
address 3
city, state, zip

For example, if a customer only fills out their business information as follows:

Jonnys biz
123 Bear Lane
Seattle, WA 98119

In Vue, it seems that unused fields (such as address 2 and address 3) are sent to the backend as the string 'null'.

So on my website, if a customer leaves out address 2 and address 3, it looks like this:

Jonnys biz
123 Bear Lane
null
null
Seattle, WA 98119

What I want is for the address to display like this:

Jonnys biz
123 Bear Lane
Seattle, WA 98119

I have made some modifications to the code. Here is a snippet:

<v-col v-if="acctdetails.BusName" cols="12">
  <v-row justify="center">{{acctdetails.BusName}}</v-row>
</v-col>
// Code continues...

After testing, when address 2 is null, blank space is shown. But even when I input "Suite B" for address 2, it still displays 'null'. I have checked the database table and confirmed that address 2 does have a value.

If a customer provides address details like this:

Jonny biz
123 Bear Lane
Suite B
Seattle, WA 98119

The displayed data ends up looking like this:

Jonny biz
123 Bear Lane

Seattle, WA 98119

Answer №1

Make sure your logic is structured like this:

<v-col v-if="acctdetails.LocAdr3 === ''" cols="12">
  <v-row justify="center"></v-row> //show empty string
</v-col>

When utilizing v-model, it's recommended to link your form inputs with empty strings

const streetName = ref('')

<template>
  <input type="text" v-model="streetName" />
</template>

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

How to add 1 to the final element in a JavaScript

I'm currently working on a task that involves incrementing the last element in an array using pop() and push(). However, I'm facing an issue where the original values are being retained after I try to increment the popped array. The objective is ...

Is it possible to determine if an AJAX request is still ongoing when a user returns to a webpage using jQuery or JavaScript?

Users on a specific page must click a 'generate' button to create details for a record. When the button is clicked, an ajax request is triggered to generate the record, which may take some time. $("#generate_record_button").on("cl ...

Output the initial value and subsequently disregard any values emitted during a specified time interval

Check out my code snippet: app.component.ts notifier$ = new BehaviorSubject<any>({}); notify() { this.notifier$.next({}); } app.component.html <div (scroll)="notify()"></div> <child-component [inp]="notifier$ | async" /> ...

What is the significance of utilizing response.json() for accessing JSON objects on both the server and client sides?

Just starting out with the MEAN stack, I've included my API code below where I'm using res.json(random) to send a random password. module.exports.changePass = function (req, res) { console.log(req.body.email) db.user.find({ where: { name: ...

What is the reason for this JavaScript code not activating the input field (aspx)?

Thank you for taking the time to review this. I understand that for most of you client side scripting experts, this task is a breeze. However, all I am trying to achieve is to display a message at the top notifying the user that their click has been regist ...

The variable req.body.Dates has not been declared

I am currently working on a project that involves dynamically populating two drop down menus using SQL Server. Depending on the selected items, I need to load a specific ejs template using AJAX. My goal is to load data based on the selected criteria. For e ...

The React form's onChange event is lurking just around the corner

I'm encountering some difficulties while creating a form with React, specifically with the password and confirm password fields. My goal is to enable users to input a password and have it instantly verified against the confirm password field to indic ...

Is it possible for Monaco Editor to accommodate nested tokens?

I have configured a custom language in the monaco editor, with two root tokens: [/^\[?[e|E][r|R][r|R][o|O][r|R]\]?\s.*/, 'error'], [/\d{1,4}(-|\/|\.|:)\d{1,2}\1\d{1,4}/, 'time'], Using this ...

Sending AJAX data from VIEW to CONTROLLER in PHP (MVC) using AJAX: A step-by-step guide

I have a page at http://visiting/blog. The Controller contains two methods: action_index and add_index. When Action_index() executes, it returns pages with indexes. On the other hand, Add_index() invokes a model's method called add_data(), which inse ...

Is there something I'm overlooking, or is this behavior unusual for an "if statement"?

I am facing an issue with returning a value from a function. It seems like a simple task - just looping through my HTMLElements and returning the one I need. This problem is new to me, and I have spent a considerable amount of time debugging the code and ...

Sending Emails Using Javascript & CSS via SMTP in a Contact Form

Currently fine-tuning a contact form and nearing completion. However, there seems to be a minor error preventing the form from submitting correctly. Expected behavior includes a pop-up confirmation box upon submission and successful message delivery. Yet, ...

Obtaining the names of arrays from a multi-dimensional array

In my JavaScript code, I have a multidimensional array that I need to iterate over. My goal is to create a new dropdown menu every time the index of the array matches an array within it. To achieve this, I want to extract the name of the nested arrays and ...

Tips for filtering array elements in MongoDB based on element dataIf you want to eliminate certain elements from an array in MongoDB based

Seeking guidance on writing a Mongo query to remove elements from an array based on specific data. { "_id": ObjectId("ajdi293akjf83rhfsf398"), "one": "oneData", "two": [ { "_id":ObjectId("akjf82ijikfj83jkfkj3"), "valu ...

Employ ng-class function in Angular JS

Utilizing the ng-class feature to include CSS classes has been a bit challenging for me. Despite reading numerous articles on the topic, I am still struggling with implementing a function call within ng-class. Below is the expression I am working with: n ...

Inheritance of Mongoose methods across all Schemas using the Schema method

Currently, I am working on nodejs with Mongoose and have data in various collections with _id as a string manually written by the user. I am looking to refactor this process and automate the generation of _id. My aim is to create a separate JavaScript fil ...

Displaying the mean of data stored within an array, presented in a tabular format

Currently, I am attempting to utilize JavaScript to display the average value within a table. Below is the code that I have implemented. Within my code, I have included a for loop to iterate through the array. However, I am encountering an issue where onl ...

How to align a div horizontally without any line breaks

Looking for a solution to align "container-element" divs horizontally without creating a newline? <div id='container'> <div class='container-element' id='el0'></div> <div class='container-element ...

What is the process for connecting a control in a template to an event listener?

I've inserted a tag into several components in my template like so. <div>...</div> <div #blopp>...</div> <div>...</div> <div #blopp>...</div> <div #blopp>...</div> <div>...</div> ...

Encountered an issue while working with npm vue-cli

Operating System: Windows 10 Node Version: v8.9.2 NPM Version: 5.5.1 I successfully installed vue-cli using NPM, but encountered an error when trying to run 'npm run dev' command. Below is the error message: npm ERR! code ELIFECYCLE npm ERR! ...

JavaScript is reporting that the length of the array is not defined, rather than the array itself

My goal is to utilize data from the Politifact API by saving it in an array named "superArray." I achieve this by making three API calls and adding 10 values from each response to superArray, as shown below: const URL1 = "https://www.politifa ...