I'm having trouble getting my .vue file to locate the JSON data I'm attempting to send to it. What could be causing this issue

Could someone take a look at this snippet of code and help me figure out why I'm encountering this error?

Error: json is undefined

(referring to the test: json below).

I've made sure to define it, point it to the correct component, and the json data is successfully fetched (I can see the complete object in the console). So why is my component not able to display it? Appreciate any assistance from users familiar with Vue.js.

The content of the .vue file:

<template>
  <div id="app">
    {{ test }}
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      test: json
    }
  }
}
</script>

The content of the .js file:

new Vue({
  el: '#app',
  data: () => ({
    json: {}
  }),
  created: function () {
    apigClient.invokeApi(apiPathParams, apiPathTemplate, apiMethod, apiAdditionalParams, apiBody).then((response) => {
      this.json = response
      console.log(this.json)
    })
  router,
  template: '<app/>',
  components: { App }
})

Answer №1

Consider passing the json variable as a prop or defining it before the export default {... statement.

In your main.js, you can send the json to the child component like this:


     ...
     template: '<app :json="json"/>'
     ...

In the child component, you can receive it like so:


      export default {
       props:["json"],
        name: 'app',
         data () {
         return {
              test: this.json
         }
       }
    }

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

In Django, the object datetime.date(2014, 4, 25) cannot be serialized to JSON

EDIT This question is unique from others discussing the issue of "datetime.datetime not JSON serializable" because it specifically relates to Django. As a result, there are solutions tailored to this context that may not apply to generic cases discussed i ...

Revise the div to be clickable

I am looking to trigger a click event on a replaced element. var checks_int = "1"; $(function () { var plus = $('.fa-plus'); plus.click(function () { if (checks_int <= 5) { $(this).parent().parent().append("<li ...

Mastering the art of customizing modal input fields in Vue.js

I am currently working on a task manager app and I'm facing a problem. I want to be able to edit an existing task, but when I use v-model, the task edits instantly without the need for a save button. However, I do not want this behavior. I would like ...

jQuery: Remember to re-bind the form when it is returned successfully

Just a quick question: I'm currently using the jQuery.forms.js plugin. My situation involves a form that posts to a PHP page and receives data in JSON format. The returned data contains code for a new form, which replaces the original form used to s ...

Scrolling the page with JavaScript

Is it possible for my webpage to smoothly scroll to a specific div within the page using JavaScript? I know I can get the offset dimensions of the target div and then use scrollTop to navigate to that area, but is this enough to achieve a smooth scrollin ...

Having trouble setting up the rootReducer using combineReducers

import { combineReducers } from 'redux'; import { reducers } from './reducers'; import { IAppAction } from './action'; import { routerReducer } from 'react-router-redux'; import { IAppState } from './state/app-s ...

What is the best way to connect the value of my range slider input to the corresponding input field in the HTML table?

I'm currently working with Django formsets. Within my HTML table body, I have a range slider. As of now, when I move the slider, it updates the last text box in the table as intended (with JavaScript handling this). However, what I want is for each s ...

define` module root path

Currently, I am working with Typescript and my source files are located in the src directory. After transpiling, Typescript generates the output in the lib folder. This means that when I need to import components from my package, I have to specify the full ...

Creating a custom toJSON function for a property declared using Object.defineProperty

Let's consider a scenario where we have an object with a specific property that is meant to reference another object, as shown below: Object.defineProperty(parent, 'child', { enumerable: true, get: function() { return this._actualCh ...

Error occurred in webpack configuration when trying to resolve the specified module

While attempting to run webpack --watch, I encountered an error stating Cannot resolve module 'js/app.js'. Subsequently, my app.min.js failed to compile when using the command npm run dev. I have set up a GitHub repository and here is my webpack ...

Creating an infinite scroll with a gradient background: a step-by-step guide

I am currently working on a project to develop an infinite scrolling webpage with a dynamic gradient background that changes based on the user's scroll position. While researching, I came across some code for infinite scrolling using time and date. I ...

Having trouble receiving notifications from the Telegram API

I have integrated mtproto-core library (https://github.com/alik0211/mtproto-core) into my Vue application to communicate with the Telegram API. Most of the functionalities are working smoothly, but I'm encountering an issue when trying to fetch updat ...

Pattern Matching for Text Content Excluding Anchor and Image Tags

I am in need of a regular expression that can specifically match the text "my company" within a string, while excluding occurrences within image or anchor tags. My current attempt is failing with this expression: /(?!]<em>?>)(my company)(?![^< ...

The area beneath the footer is devoid of content

While working on my webpage, I noticed that some pages have extra white space below the footer. However, when I refresh the page, the extra space disappears. This issue seems to affect almost all of my pages except for Home and Contact Us. To troubleshoo ...

Convert the Include/require output to JSON encoding

I have a fully developed PHP application that was not created following the MVC design pattern and lacks a templating system like Twig. The issue I am facing is that instead of receiving a variable that stores the template (HTML output), it directly print ...

Navigating through nested JSON structures using Powershell

Having trouble navigating through nested JSON with PowerShell example.Json: { "GROUP1": [ { "name": "a", "age": "21" }, { "name": &q ...

How to Use Curl to Add a Json Document to Solr Using the Json

Attempting to insert a JSON document into a Solr core using cURL command: curl -X POST -H 'Content-Type: application/json' 'http://xxxx:6083/solr/daw_index/update?commit=true' -d' { "add":{ "doc":{ "dataSet_s": "ORACLE", "rule ...

Encountering a JsonException while parsing a JsonArray that is not a primitive array

Here is the Response I am receiving in this specific format [{"id":15395,"firstName":"Real","lastName":"Me","phone":"(555) 455-6666","address1":"9800 Fredericksburg Road ...

What's the best way to retrieve the id or index of a card within a list?

Struggling to fetch the id's of documents retrieved from a MongoDB database and displayed on React and Material-Ui cards. Tried logging id in functions and APIs, but receiving 'undefined' or metadata from the delete function. Delete functi ...

Guide on obtaining JSON data for an android application from a WordPress website using custom post types, unique meta boxes, categorization, comment sections, and author listings individually

I am looking to transform my website built on WordPress into an android application. Within my site, there are 4 distinct custom post types, over 20 custom meta boxes, and the necessity for author profile details. The mysql database size exceeds 500mb. I ...