I've come across certain challenges when setting values for Vue data objects

I'm having trouble with a Vue assignment. Here is my code:

new Vue({
el: "#alarmEchartBar",
data: {
    regusterUrl: Ohttp + "historicalAlarmRecord/chart",
    regDistrictUrl: Ohttp + "district",
    regStreetUrl: Ohttp + "street/",
    regCameraUrl: Ohttp + "camera/",
    meger: false,
    timeUnit: 1,
    startTime: 0,
    endTime: 0,
    districtName: "全部",
    streetName: "全部",
    cameraName: "全部",
    districtData: [],
    streetData: [],
    cameraData: [],
    DID: [],
    SID: [],
    CID: [],
    requestData: {
        "dIds": this.DID,
        "cIds": this.CID,
        "sIds": this.SID,
        "merge": this.meger,
        "timeUnit": this.timeUnit,
        "startTime": this.startTime,
        "endTime": this.endTime,
    },

  }})

When I try to access the requestData value, it shows as undefined. Is there a way to successfully assign this value?

javascriptvue.js

Answer №1

If you're facing this scenario, utilizing computed properties could be beneficial.
https://v3.vuejs.org/guide/computed-properties.html
Feel free to test out the following code snippet:

const app = Vue.createApp({
  el: '#alarmEchartBar',
  data() {
    return {
      regusterUrl: 'http://example.com/historicalAlarmRecord/chart',
      regDistrictUrl: 'http://example.com/district',
      regStreetUrl: 'http://example.com/street/',
      regCameraUrl: 'http://example.com/camera/',
      meger: false,
      timeUnit: 1,
      startTime: 0,
      endTime: 0,
      districtName: 'All',
      streetName: 'All',
      cameraName: 'All',
      districtData: [],
      streetData: [],
      cameraData: [],
      DID: [],
      SID: [],
      CID: [],
    };
  },
  computed: {
    requestData() {
      return {
        'dIds': this.DID,
        'cIds': this.CID,
        'sIds': this.SID,
        'merge': this.meger,
        'timeUnit': this.timeUnit,
        'startTime': this.startTime,
        'endTime': this.endTime,
      };
    }
  }
});

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

Transferring data from one HTML element to another using Angular [Ionic]

My project involves utilizing an ionic slide box to display a series of images within it. <ion-slide-box> <!-- I am looping through the images based on the image count --> <ion-slide ng-repeat="n in [].constructor(imageCount) track by $in ...

javascriptangularjsionic-framework

Expanding the Functionality of Vue Lifecycle Hooks

In my specific use case, I need to execute a method on each component when it is mounted. One possible solution could be to create the method as a global mixin and then call it like this: mounted(){ this.mySpecialMethod(); } But I am curious if there ...

vue.jsvuejs2

Discover the location following a designated distance along a direct path connecting two points in the Google Maps API

Using the Google Maps API, I have plotted a straight line from point P1 to point P2. Both points have latitude and longitude coordinates available. I am interested in finding a point (P) along this straight line, located at a specific distance from P1. F ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Sending a form using an AngularJS dropdown menu

I have recently started using angularjs and decided to switch out a traditional html <select> box for an angular modal select box. The select box successfully populates with data from a $http ajax request, but I am facing issues with form submission ...

javascriptjqueryhtmlangularjsforms

Passing information from a directive to a controller using AngularJS

I am looking to display the progress of a file upload using a file reader. Here is the HTML code snippet I have: <md-progress-linear id="file-progress-indicator" md-mode="determinate" value="{{progress}}"></md-progress-linear> and below is m ...

javascriptangularjsangular-directive

Using relative paths to showcase images in Node.js

I am currently working on my first Node.js MVC app where I am using native Node and not utilizing Express. One issue I am facing is the difficulty in displaying images from my HTML files through their relative paths. Instead of sharing my server.js and ro ...

javascripthtmlnode.jsimagefiletree

Printing dynamic data

When the print button is clicked, I need to print dynamically generated data from a table that has an ID. The table data (td and tr) is dynamically generated. I have successfully retrieved the table data and attempted to print everything using window.prin ...

javascripthtmlajaxweb

Extracting information from HTML and transferring it to Javascript using jQuery

My goal is to utilize jsGrid for showcasing database data without repeating code extensively. I aim to generate separate grids for each <div> with a specific id while passing on relevant values accordingly. To clarify my objective, here's a sni ...

javascriptjqueryhtml

To successfully execute the Laravel 8 update form code, all fields must be updated. Errors may occur if only a single field is modified

Experiencing issues with updating fields in Laravel 8 form? Ensure all fields are updated to avoid errors when only one field is modified. The product controller code snippet provided below showcases an update function that covers all fields. public functi ...

phplaravelvue.js

The hiding/showing of elements is not being executed correctly by jQuery

My web template includes HTML and jQuery code for a project I'm working on. During the $.getJSON call, there can be a delay in loading the data. To inform the user to wait, I added a warning message in a div with the id="warning". The code properly ...

javascriptjqueryhtmlcss

Surprising 'T_ENCAPSED_AND_WHITESPACE' error caught me off guard

Error: An error was encountered while parsing the code: syntax error, unexpected character (T_ENCAPSED_AND_WHITESPACE), expected identifier (T_STRING) or variable (T_VARIABLE) or number (T_NUM_STRING) in C:\wamp\www\html\updatedtimel ...

javascriptphphtmlsyntax-error

Dygraphs.js failing to display the second data point

My website features a graph for currency comparison using Dygraphs. Everything was working fine until I encountered this strange issue. https://i.stack.imgur.com/OGcCA.png The graph only displays the first and third values, consistently skipping the seco ...

javascriptjsoncsvchartsdygraphs

Guide on redirecting a webpage post form validation in JavaScript

I have a question about my JavaScript code. Even if validation fails, the contact us page still appears. How can I fix this issue? Appreciate any help. Thank you! (function () { window.addEventListener('load', function () { var forms = do ...

javascript

showing the upload preview and disabling automatic uploading in Dropzone with React

Currently, when the user clicks the upload button and selects a file, it automatically uploads the file. However, I do not want this automatic upload to happen. Instead, I want to display the selected files to the user first before uploading them. I need ...

javascriptreactjsreact-dropzone

Tips for displaying a loader image with a centered message and preventing the bootstrap modal dialogue box from closing during an AJAX response from a PHP file

I am using Bootstrap version 3.0.0. Below is the HTML code for a Bootstrap Modal: <div class="modal fade" id="newModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> < ...

javascriptphpjqueryajaxtwitter-bootstrap-3

Issues encountered when trying to implement helperText in mui date picker

Can someone assist with this issue? The helper text is not displaying as expected in the following code snippet: <div className={classes.container}> <LocalizationProvider dateAdapter={AdapterDateFns}> <Des ...

javascriptreactjsmaterial-uifrontend

unable to use 'await' keyword to delay the code execution until a function finishes

I'm encountering an issue where I need to wait for the result of a local function before proceeding further. Here is the code for the local function: var Messagehome = (req, res) => { user.find().exec(async (err, user) => { if (err) ret ...

javascriptnode.jsasynchronouspromise

Selecting options on hover, either A or B at the least

I need a jQuery selector to handle an 'either' scenario. Specifically, I have a dropdown menu and want it to stay open when the user hovers over either of two elements. Either when they hover over the button or when they leave the popped-out men ...

javascriptjqueryjquery-hover

Optimal method for a React and HTML Select-component to output String values instead of Integer values

Within my React-class (JSX), I've included the following code: var Select = React.createClass({ onChange: function (ev) { console.log(ev.target.value); }, render: function() { var optionsHtml = this.state.options.map(function (el) { ...

javascriptreactjsjsx

Encountering an Unexpected Error in Next.js When Revalidating Paths

I'm facing an issue with my Next app where, despite editing a resource through an API endpoint following the pages-based system, the changes aren't reflected when I try to view or re-edit the resource. After checking the documentation, I discover ...

javascriptnext.js