Vue - InertiaJS: Object Entry not permitted

When I load my Vue component, I pass the array "ticket_data" as a prop. I am able to successfully make a post to a controller using an Inertia form without any issues.

However, I am struggling to access individual values from the array...

This is my current code:

let props = defineProps({
    ticket_data: Object,
    ticket_messages: Object,
});

let form = useForm({
    text: '',
});

let submit = () => {

    form
    .transform((data) => ({
        data,
        ticket_id: props.ticket_data.ticket_id, // null
        ticket_id: props.ticket_data, // gives all Data see Json
    }))
    .post('/account/user/support/ticket/send', {
        preserveScroll: true,
        onSuccess: () => form.reset('text'),
    });
};

When I try to access "props.ticket_data" individually and submit, the following data is sent to my controller:

"ticket_id":[{"user_id":1,"ticket_id":5,"reference":"Testticket","state":0,"author":"Kevin Johnson","text":"..","created_at":"11/04/22 - 19:58"}]}

I cannot simply access it with "props.ticket_data.ticket_id". Why doesn't this work?

Also, trying to access it like this - "props.ticket_data.[1]" - does not yield the desired result either...

Answer №1

Retrieve a specific ticket using its ID:

props.ticket_data.find(ticket => ticket.ticket_id === 5) // <-- Unique ticket ID

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

Submitting multiple forms with one button can produce unexpected results

As I work on my app development, I encountered an issue when trying to submit multiple forms using a single button. I applied the same class to all the forms and looped through them to submit. While this approach worked smoothly on my localhost, it seems ...

Can Enums be nested in Typescript?

Consider the following enums: export enum Category { FOOD = 'food', DRINK = 'drink' } export enum Type { COLD = 'cold', HOT = 'hot' } Can these be combined into a single enum? For example: export enum Prod ...

How can I utilize "convert-excel-to-json" to extract a specific value from an Excel sheet and store it in a variable?

Currently, I am in the process of learning how to utilize the installed npm module "convert-excel-to-json" to extract a single cell value from an Excel sheet and store it in a variable using Node.js. Within my Excel workbook, there are 8 values ranging fro ...

A guide to creating 2D alphabet renderings with three.js

I'm currently in the process of developing a 2D game that involves blocks falling down in a Tetris-like fashion. I'm looking to render different alphabets on these blocks. Here's how I am setting up the blocks: var geometry = new THREE.Bo ...

A guide on verifying if two arrays of integers are permutations using JavaScript

Is there a way to determine if two sets of integers in JavaScript are permutations? For example, given the arrays: a = [1, 2, 3, 4, 5] and b = [2, 3, 5, 1, 4] I want a function that will return true if they are permutations of each other. ...

Leveraging AngularJS for retrieving the total number of elements in a specific sub array

I'm currently working on a to-do list application using Angular. My goal is to show the number of items marked as done from an array object of Lists. Each List contains a collection of to-dos, which are structured like this: [{listName: "ESSENTIALS", ...

Potential security risk in Vue.js due to cross-site scripting

I have been exploring the potential vulnerability of vue.js to XSS attacks and have encountered a specific scenario: After receiving input from a user (let's say simple open text), which we'll call: input_text We store this input in a database O ...

The Stormpath API enables users to securely log in by sending JSON data through the POST method for

As a newcomer to the Stormpath API, I recently delved into the documentation for creating applications and users. After successfully completing those tasks, my next goal is to authenticate or validate users using web services. The code I have written for t ...

Inquiries regarding my Vue testing application integrated with Supabase

I have a query regarding extracting a specific value from an array returned by Supabase. Here is the code snippet I am using: countries.value = parseInt(countries.value.map(({ aantal }) => aantal)); When I don't use parseInt, the number appears l ...

Issue with Web API and AJAX: Unable to retrieve resource, server returned status code 400

[HttpPost("Login")] public async Task<IActionResult> Login([FromBody] SigninViewModel formData) { MemberCredential membercredential = await db.MemberCredential.FirstOrDefaultAsync(t => t.MemberAccount.Equals(f ...

How can you extract and save all links on a webpage based on their class name?

Hello everyone, this is my first question on Stack Overflow. I am trying to extract all links on a page by their class name, store them in an array, and export the results as a JSON format file named results.json. My background is in PHP, C++, and I am c ...

Floating Elements Centralized

I have a relatively straightforward HTML layout with a heading div at the top, followed by a Main div that contains a NavBar on the left side and a ContentDiv on the right. The issue I'm facing is that I can't seem to get my NavBar and ContentDi ...

Alter the top property of CSS using JavaScript

Hey there! I'm currently working on a project where I want to gradually change the background when a button is clicked on my website. Below you'll find snippets of JavaScript and HTML code that I'm using for this purpose. Can you take a look ...

Issue with calling function from props in React is not being resolved

There seems to be an issue with the function not being called when passed into a functional component. While the onSubmit function is triggered, the login(email, password) function inside the Login component is never executed. Despite placing console.log s ...

Guide to displaying a loading image when selecting an item from a dropdown menu using JavaScript

When using three drop-down lists and performing an AJAX call on each dropdown list's onclick function, I encountered a delay in loading the data. To address this issue, I attempted to display a loading image while processing the AJAX call. <form ...

Having issues with triggering a function from child props in React

I've been working on firing a function from an onClick event in a child component. getTotalOfItems = () => { console.log('anything at all?') if (this.props.cart === undefined || this.props.cart.length == 0) { return 0 } else { ...

When attempting to invoke the rest function, an error occurs stating that the dataService.init in Angular is not

Learning AngularJS has been my current focus. To practice, I have been working on a Quiz app tutorial. However, I encountered an issue when trying to call the rest function of a factory after injecting it into one of my controllers. The JSON data for this ...

Tweeter Only Words(content)

I am currently working on a small project involving Twitter. I need to save only the text or status of the tweets into a .txt file based on my search query. Right now, I am able to save the JSON format of my search results into the .txt file. However, I do ...

The front-end is responsible for removing the last item from an array

Having an issue with my React code. Here is my parent component: class RoomPrice extends React.Component { constructor(props){ super(props) this.state = { room: this.props.room, prices: [] }; this.handleDeletePrice = this.h ...

A dynamic star rating plugin in jQuery that allows for partial star ratings

Can you offer some guidance? I've searched on google but couldn't find anything helpful. I'm looking for a star rating system for my website that can display an initial value with decimals (like 2.75 displaying as 3/4 of a star) while only a ...