Arrange the data in the table to ensure that it is organized neatly into the appropriate columns

I am currently working on a project that involves creating a table to display user answers for purchased tickets under the corresponding questions. If a question has not been answered, I want to show a dash symbol instead.

However, I am encountering an issue where the answers are getting mixed up when there is more than one ticket purchased by the user.

For instance, in the example image https://i.sstatic.net/RBujM.png, the numbers should align under 'Mobile Num?' in the same row as 'Free 2', while 'Male' and 'Aadil' with '20' should be under 'Gender?', 'Name?', and 'Age?' respectively in the same row as 'Free'.

Below is a snippet of my HTML:

<template>
    <fragment>
        <tr>
            <td :rowspan="countArray + 1">
                <img :src="user.profile_image">
            </td>

            <td :rowspan="countArray + 1">
                {{user.first_name + " " + user.last_name}}
            </td>

            <td :rowspan="countArray + 1">
                <div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle">
                    <td>
                        {{nameTick}}
                    </td>
                </div>
            </td>
        </tr>

        <tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey">
            <td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey">
                {{ans.answer}}
            </td>
        </tr>
    </fragment>
</template>

And here is a snippet of my JS:

beforeMount: function() {
        this.$axios.$get(`/user/${this.userId}`).then(response => {
            this.user = response
        });

        for (let i = 0; i < this.ticketName.tickets.length; i++) {
            this.tickets_name = this.ticketName.tickets[i].ticket_name;
            this.countArray = this.ticketName.tickets[i].count;
            this.name.push(this.tickets_name);
        };
    },

    watch: {
        tickets: {
            handler: function(val) {
                for (let x = 0; x < val.length; x++) {
                    this.$axios.$get(`/ticket/${val[x].id}/answer`).then(response => {

                        for (let i = 0; i < response.questions.length; i++) {
                            this.userAnswered = response.questions[i];

                            this.answered.push(this.userAnswered.answer);
                        }
                        console.log(response)
                        this.allQuestions = this.ticketAns.push(response);
                    })
                }
                // this.userAnswers.push(this.ticketAns);
                this.userAnswers.push(this.answered);
            }
        }
    }

Any assistance on resolving this issue would be highly appreciated. Thank you!

Answer №1

Rearrange the content inside a <div> element using grids and CSS to improve organization.

<template>
        <fragment>
            <tr>
                <td :rowspan="countArray + 1">
                    <img :src="user.profile_image">
                </td>

                <td :rowspan="countArray + 1">
                    {{user.first_name + " " + user.last_name}}
                </td>

                <td :rowspan="countArray + 1">
                    <div v-for="(nameTick, nameKey) in name" :key="nameKey" class="tdStyle">
                        <div class="ui grid">
                            {{nameTick}}
                        </div>
                    </div>
                </td>
            </tr>

            <tr v-for="(ticketQues, quesKey) in ticketAns" :key="quesKey">
                <td v-for="(ans, ansKey) in ticketQues.questions" :key="ansKey">
                    {{ans.answer}}
                </td>
            </tr>
        </fragment>
    </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

Leverage the power of react-i18next in class-based components by utilizing decorators and Higher Order

Currently, I am working on implementing i18n into my React project that also utilizes Redux, with the assistance of react-i18next. In this particular project, we are using class components alongside decorators. Originally, I intended to experiment with r ...

I am looking for a tool that can extract XML data from a remote URL and convert it into JSON format for easy retrieval using JavaScript

Grabbing XML directly from your own domain's local URL is simple, but doing so cross-domain can be more challenging. How can you retrieve the XML data located at using javascript? ...

Utilizing Highcharts-vue for Interactive Stacked Column Charts with Drilldown Feature

I'm currently attempting to recreate a chart similar to the one shown in this example using Vue.js. Admittedly, I am in the process of learning Vue.js, so I find it beneficial to replicate existing projects as a way to build confidence quickly. One ...

Creating a Three.js 3D Text Effect with Layers of Letters

Why are my 3D text letters overlapping in the threejs TextGeometry when viewed from an angle? https://i.sstatic.net/W0ocu.png See the code snippet below: class MyScene { // Code for handling Three.js scene and elements constructor(elementSelector ...

A solo-dimensional array generated within a PHP while loop

Is there a way to extract the value of an array that is enclosed within a while loop and then use it outside of the loop? I managed to achieve this using the following code: $xyz = array(); while($row2 = mysql_fetch_assoc($result2)) { $value = $row2[& ...

Troubleshooting JavaScript If-Else Statements

Having a bit of trouble with my if else structure. When I enter the correct star name like "Vega", it incorrectly shows me "Error" instead of the expected result "Lyra". Here's my code snippet: var stars = ["Polaris", "Aldebaran", "Deneb", ...

Utilizing query parameters as variables in rewrites with Next.js

My goal is to use Next JS to redirect requests from /home?id=123qwert to the new path of /home/123qwert. I'm struggling with extracting the query parameter from the source and using it in the destination. This is what I have attempted so far: as ...

What steps should be followed to incorporate a horizontal scrollbar within the table's header?

I'm currently using Vue and Vuetify to create a unique layout that looks like this: https://i.stack.imgur.com/QBs3J.png The layout consists of a card with three rows: The first row displays the number of items and includes a search bar. The second ...

Is the 404 page being utilized as a fallback for AJAX requests?

I am looking to create a one-page website that utilizes history.pushstate to modify the URL. My plan involves having only one HTML file for the site, which would be the 404 error page. This setup would redirect users to that page regardless of the URL they ...

Positioning of the dropdown in Material UI AutoComplete menus

Is there a way to turn off autocomplete auto position? I would like the autocomplete options to always appear at the bottom. Check out this link for more information! ...

Upon a successful AJAX post request, the page fails to display

I'm encountering an issue connecting my front-end JavaScript to my back-end Node/Express. Although the requests from my client-side js to the server return successful, the page I am requesting fails to render. On the server side, here is my code: ap ...

Guide to cycling through Promise results and populating a form

I have an asynchronous function that returns a Fetch Request: async fetchDataByCodOS(codOS){ const res = await fetch( 'http://localhost:5000/cods/'+codOS, { method:"GET" } ).then(res => ...

Using a single function to generate multiple instances of a table in JavaScript

My journey to learning javascript led me to create a simple game called circle of crosses. Below is the code I used: (JS) // JavaScript code here (HTML) <!DOCTYPE html> <html> // HTML code here </html> I came across an issue whil ...

What are some possible solutions for resolving the CORS issue with proxies in a production environment?

I recently completed an app using Vue.js with Spring Boot on the backend. During development, I utilized a devServer proxy setup like this: devServer: { proxy: { '/api': { target: 'http://localhost:8087/', changeOrigin ...

Unable to locate the module model in sequelize

Having some trouble setting up a basic connection between Postgres and SQL using Sequelize. I keep getting an error where I can't require the model folder, even though in this tutorial he manages to require the model folder and add it to the sync, lik ...

Creating Secure JWT Tokens

Hello there! I'm currently in need of assistance with generating JWT tokens that include three headers: alg, kid, and typ. The format I am looking for is as follows: { "alg": "RS256", "kid": "vpaas-magic-cookie-1 ...

The page does not seem to be reloading properly due to a redirect issue

I am currently updating some data and then attempting to reload the current page. After discovering the status code that allows me to switch the redirect method from put to get (303), I noticed that it is functioning correctly. However, despite seeing "fi ...

How to retrieve scope variable within the <script> element

I have a question about using angularjs. Here is the structure of my HTML: <html> <body ng-controller="datafileController"> <div class="container"> <center><h1>Datafiles</h1></center> ...

Issue encountered at 'site construction' phase: failure in build script with exit code 2

I am a novice and struggling to solve this error. I have attempted to fix it by adjusting the deploy settings, but I can't seem to resolve this compilation error. The syntax errors are overwhelming, and I'm not sure if there is something crucial ...

Solving the Dilemma of Ordering Table Rows by Value in JavaScript

I am currently working on a table and my goal is to display rows in an orderly manner based on the sum of their columns. Essentially, I want the rows with the highest values to be displayed first, followed by rows with second highest values, and so on. Des ...