Show complete items in Vue.js

Issue at hand: I am in need of displaying and potentially changing JSON data. My goal is to present it in a directory tree format. The structure of the object is unknown, it could be something like this:

"buttons": {
    "login": "LOGIN",
    "register": "REGISTER",
    "next": "Next",
},
"nav": {
    "account": "Acount",
    "login": "Login"
},

On the other hand, it might also look like this:

"register": {
    "user": "User",
    "email": "E-mail",
    "language": {
        "en": "English",
        "de": "German",
        "es": "Spanish",
    }
},
"blog": {
    "search": "SEARCH",
    "comments": "COMMENTS"
},

The issue lies with the unpredictability of the nested structure. I have already created a parser to convert it into an object, but I am unsure of how to display it on the website.

javascriptjsonobjectvue.jsvue-component

Answer №1

Is it possible to utilize a library?

I have found a fantastic solution for displaying JSON data using the following library: .

This library accepts a JSON object in any format as a parameter.

Keep up the great work!

Answer №2

If you want to bind a textarea to a computed property using v-model, you can do so like the example below:

Here is an example:

<textarea v-model="my_JSON_model"></textarea>

<script>
    export default {

        data() {
            return {
                my_JSON: {} // import your JSON here
            }
        },

        computed: {

            my_JSON_model: {

                get() {

                    return JSON.stringify( this.my_JSON , null , '\t' )

                },

                set(val) {

                    this.my_JSON = JSON.parse(val);

                }

            }

        }

    }
</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 assigning a function and its arguments as a callback in programming?

Here is a code snippet for your consideration: $scope.delete=function(){ foo('x',3); }; How can we improve the clarity of this code snippet when the callback function contains only one line that calls another function? It's important ...

javascript

JavaScript can be utilized to monitor outbound clicks effectively

I am currently working on implementing the code found at this link: Make a ping to a url without redirecting. The original poster is looking to ping a URL without opening multiple windows. My goal is to achieve the same functionality, but I also want to vi ...

javascriptphphtmlajaxhttp-redirect

Properly configuring paths in react-native for smooth navigation

When working on my React-Native project, I noticed that my import paths look something like this: import { ScreenContainer, SLButton, SLTextInput, } from '../../../../../components'; import { KeyBoardTypes } from '../../../../../enums ...

javascriptnode.jsreactjstypescriptreact-native

Converting Excel sheets to JSON using Vue.js

Struggling with reading excel files in vue.js as the memory usage spikes to 5GB after processing a small file. Need help converting the file to JSON format. Tried various options mentioned in the documentation but encountered different errors. Also checked ...

javascriptexcelvue.jssheetjs

When saving, generate a new object and send it to the designated endpoint

I'm feeling a bit confused, unsure of how to proceed. In my program, the task is to upload images (in base64 format) and add them to an array with a maximum limit of 5. After uploading the images, the next step is to click a button labeled Save to s ...

javascripthtmlangularjspost

Display targeted information upon clicking a designated division using JavaScript or jQuery

I'm working on a FAQ page and I want to display a specific answer when a particular question is clicked. If you'd like to see it in action, here's a fiddle: http://jsfiddle.net/hdr6shy9/ Below is the code I'm using: HTML: <div cl ...

javascriptjquery

Create PDF files on-the-fly using the html-pdf module

Recently, I've been using the npm package html-pdf for generating PDF invoices dynamically. However, I encountered a problem where instead of saving values to the PDF file, it was saving ejs code. Does anyone have any insight on why this might be happ ...

javascriptnode.jsexpressnpmejs

Implement a feature in Bootstrap Vue Timepicker that automatically resets the minutes to 00 whenever the user selects the hours

When a user opens the timepicker, both hours and minutes will be blank. When they choose the hours, the minutes should automatically be set to 00. Thank you for your help. <b-form-timepicker v-model="meditation.start.time" ...

htmlvue.jsdatetimebootstrap-vuebootstrap-datetimepicker

Display loading spinners for multiple ajax requests

At the moment, I am displaying spinners using the ajax setup method call: (function() { $.ajaxSetup({ beforeSend: showLoader, complete: hideLoader, error: hideLoader }); })(); While this setup is functioning properly, the ...

javascriptjqueryajax

Tips for importing and exporting icons in a way that allows for dynamic importing using a string parameter

I am facing an issue with dynamically importing SVG icons in React Native. Initially, I tried using the following code snippet: const icon = require(`@src/assets/icons/${iconName}`) However, after realizing that this approach wouldn't work for me, I ...

javascriptreactjsreact-native

Query the field from a collection of JSON objects using MySQL

I have a column in my database named foo_ids with the following content: [{"id": "432"}, {"id": "433"}] The question is, which query will return all of the ids in this field as a result? After several attempts, my latest query was SELECT JSON_EXTRAC ...

mysqljson

Troubleshoot my code for clustering markers on a Google map

I'm currently working on a piece of code to generate a Google map that contains 3 hidden points within one marker. The idea is that when the main marker is clicked, these points will either merge into one or expand into 3 separate markers. However, I& ...

javascriptgoogle-mapsgoogle-maps-api-3google-maps-markersmarkerclusterer

A guide on immediately invoking a method when a class is initialized in JavaScript

I'm having some trouble with a class I created to handle user information. When I try to add an init() function to the class so that it runs as soon as the class is initialized, I keep getting a SyntaxError. I've tried following the advice from ...

javascriptclass

The combination of Masonry, FlexSlider, and endless scrolling functionality creates a

I am currently using the Masonry layout and implementing infinite scroll functionality through a jQuery plugin. Within this content, I have various FlexSlider slideshows. Unfortunately, when I trigger the infinite scroll feature, the slider does not displa ...

javascriptjqueryslideshowinfinite-scroll

Fixing the Responsive Menu Issues

In order to achieve the desired effect of making the text from menu and logo disappear when minimizing the menu, you can use the following approach: Create a function called `smallNav()` to handle the resizing of the sidebar container: function sm ...

javascripthtmlcssbootstrap-4

Submitting data from a JavaScript frontend to a PHP backend

I've exhausted all options in attempting to resolve this issue. The javascript code is designed to send a list of product IDs to a PHP page. When products are selected, the submit button should activate the submit function. function submit() { ...

javascriptphpjqueryarrays

Utilizing traditional JavaScript variables within Express.js or Node.js: A comprehensive guide

How can I successfully export variables from regular JavaScript to be used in ExpressJS? I attempted to use 'exports' but it didn't yield the desired results. For instance, in a regular JS file: var search = 'hello'; exports = s ...

javascriptnode.jsexpress

Ways to pass properties while using render in reachrouterdomv6?

Currently, I am enrolled in a Udemy course, but the information provided is based on v5. I am struggling to understand the equivalent of "render" and how to pass props with it. Additionally, there seems to be an issue with the code - if the element is un ...

javascriptreactjs

Node.js is having trouble locating the JSON file for Ajax requests

Currently, I've developed a fun little game using the p5.js library and wanted to integrate a Leaderboard feature that pulls data from a JSON file acting as a database to store Usernames and scores. To achieve this, I've utilized a Node.js server ...

javascriptjsonnode.jsajaxp5.js

The JSON data is failing to load into the textviews

Help needed with loading data from a remote server using the Volley library. So far, here's what has been accomplished: public class Leaderboard extends AppCompatActivity { private ListView leaderListView; private ProgressDialog loading; private Text ...

phpandroidmysqljson