Observing for form input in Nuxt.js

There is a form on my webpage, which includes the following elements:

<div v-if="this.userdata.address == ''">Please enter your address</div>

Your address
<input type="text" v-model="userdata.address">
Your phone
<input type="text" v-model="userdata.phone">
Your message
<input type="text" :disabled="this.userdata.address == '' ? true : false">

In the script section of my page, I have the following code snippet:

<script>
export default {
   data() {
     return {
      userdata: {
        companydata: {}
      }
     }
   }

.....
<script>

If the user is authorized, the "userdata" data will be populated in the fetch() method.

The issue I am facing is that when navigating to this page from another page, the functionality of checking if the address field is filled and enabling the Message field accordingly is not working. However, it works fine on page reload.

What could be causing this problem?

Answer №1

My userdata was lacking the address data, but I was able to resolve this issue by including it as an empty string.

<script>
export default {
   data() {
     return {
      userdata: {
        address: "", //// By adding this, my problem was fixed
        companydata: {}
      }
     }
   }
}

.....
<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

What is the process for configuring PhpStorm to sync with TypeScript tsconfig.json in .vue files?

Vue.js (webpack + vueify) with TypeScript is my current setup. The ts configuration appears to be functioning, but only in .ts files. For instance, in tsconfig.json: "compilerOptions": { "strictNullChecks": false, So strictNullChecks works as expect ...

Utilizing emotion with MUI v5 for dynamic theming

After upgrading MUI from v4 to v5, I'm facing some difficulties grasping the concept of theming with the various solutions available. I find it challenging to determine when to use MUI theming/styling components and when to opt for emotion ones. Whil ...

What is the process for fetching a texture from a MySql database using three.js?

Is it possible to load a model's texture from a MySql database using three.js and php, based on the logged-in user? My goal is to display the texture on the model that corresponds to the current user. Can I simply use "echo" to retrieve the column con ...

Unable to retrieve data in Vue using Axios for GET request

Recently delving into Vue, I'm struggling to figure out what's causing the issue in my code. Here's a simple component snippet: <template> <template v-if="loading"> Loading... </template> <te ...

Updating model values while dragging with Angular Dragular

Currently, I am experimenting with dragula and its newer version, dragular, on some sample projects. One specific dilemma I am facing involves the implementation of drag and drop functionality in an Angular project. My query pertains to utilizing a list o ...

Ways to identify when a file download has finished with the help of javascript

let pageUrl = "GPGeneration_Credit.ashx?UniqueID=" + __uniqueId + "&supplierID=" + supplierID + "&CreditID=" + OrderIds; window.open(pageUrl); // Want to check if the file download is complete and then refresh the page location.r ...

Is the condition failing to evaluate for all td elements?

I am currently dealing with an HTML table. When I select a checkbox, I aim to compare the values of the cells in each row. This comparison works correctly for the first row, but it does not work for any subsequent rows. HTML Code - <form role="fo ...

What are the best ways to engage with the Mixcloud Widget?

I have a component with a mixcloud embed code, which looks like this: <template> <div> <iframe id="widget" width="100%" height="60" :src="iframe.src" frameborder="0" v-show="iframe.loaded"></iframe> </div> </templ ...

Ways to dynamically combine a group of objects

I'm grappling with a challenge involving an array containing two objects. After using Promise All to fetch both of these objects, I've hit a roadblock in trying to merge them dynamically. Despite experimenting with various array methods like map, ...

What steps can be taken to resolve the error message "Module '../home/featuredRooms' cannot be found, or its corresponding type declarations"?

Upon deploying my site to Netlify or Vercel, I encountered a strange error. The project runs smoothly on my computer but seems to have issues when deployed. I am using TypeScript with Next.js and even attempted renaming folders to lowercase. Feel free to ...

How to smoothly scroll with jQuery animation without relying on $.browser and preventing double firing

Many inquiries have arisen about the cross-browser functionality of $('html, body').animate();, yet I seem unable to find a solution for this particular issue: I am eager to eliminate $.browser from my code, but I do not want the scroll event to ...

Is there a way to incorporate the image that was uploaded from the server onto an HTML page without using the file extension?

$('#userInfoPhoto').html(function () { return '<img src="../uploads/' + thisUserObject.profileimage + '" alt = "userphoto" style="width:250px; height:250px"/>' }); This script is essential for rendering images on th ...

Get the value of a JSON in template strings

After querying objects from a table, they are stored in objarr. How can I retrieve these values in the UI using JavaScript? from django.core.serializers import serialize json = serialize("json", objarr) logging.debug(type(json)) response_dict.update({ ...

How can I retrieve the index of a v-for loop within a function in Vue.js HTML?

How can I splice the array from the fields in HTML Vue JS if the status is true? I also need to pass the index value to a function. Is this possible? The error I am encountering is: Uncaught ReferenceError: index is not defined at Object.success (80 ...

Troubleshooting Block-scoped errors on Heroku using Node.js and Express

Currently, I am working with node.js and express on the Heroku platform. While working on the route file, I encountered an issue when using the let keyword. The error message displayed was: SyntaxError: Block-scoped declarations (let, const, function, cla ...

Utilizing various Firestore requests at varying intervals using the useEffect hook in React

useEffect(async() => { await getWord(); const interval = setInterval(() =>{ time2 = time2 - 1; if (time2 == 0) { clearInterval(interval); let dataURL = canvasRef.current.toDataURL(); const db = firebase.firestore(); ...

Guide to acquiring the webViewLink using Google Drive Api v3?

I'm having trouble locating the webViewLink. The documentation (https://developers.google.com/drive/api/v3/reference/files) states that I should receive this parameter when requesting gapi.client.drive.files.list(). However, I don't even have a c ...

Troubleshooting: Why isn't my Vuetify v-form sending data when submitted

Apologies for any translation errors :) I have created a simple form to test retrieving data from my API using Vuetify. However, when I submit the form, the data from v-select is not being sent and I cannot figure out why. Typically, examples of these for ...

Tips for calculating the difference between timestamps and incorporating it into the response using Mongoose

In my attendance model, there is a reference to the class model. The response I receive contains two createdAt dates. const attendanceInfo = await Attendance.find({ student: studentId, }) .populate('class', 'createdAt'); ...

The issue arises when trying to use destructured imports with Mongoose

I've been developing a straightforward Express app with ES6. In the process of creating a schema and model for Mongoose, I encountered an issue with the following syntax: import mongoose, { Schema } from 'mongoose'; const PostSchema = new ...