Interested in using v-for and I have encountered a scenario with an object structure as seen here: https://i.sstatic.net/wNguk.png
Upon inspecting the dev console, the object looks similar to this: https://i.sstatic.net/jyqth.png
My query is about how to effectively iterate through both the main array and the nested array within it using v-for. I attempted to use this solution but unfortunately, it was not successful.
Appreciate any assistance on this matter!
Demo :
new Vue({
el:"#app",
data:{
items: [{
messageSettings: [{
userOne: '1',
userTwo: '2'
}],
profile: [{
freelancerAbout: 'about1',
freelancerName: 'name1'
}],
messages: [{
id: 1,
name: 'message1'
}]
}]
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="item in items" :key="item">
<p v-for="msgSetting in item.messageSettings" :key="msgSetting">
<span>UserOne: {{ msgSetting.userOne }}</span><br>
<span>UserTwo: {{ msgSetting.userTwo }}</span>
</p>
<p v-for="profile in item.profile" :key="profile">
<span>freelancerName: {{ profile.freelancerAbout }}</span><br>
<span>freelancerName: {{ profile.freelancerName }}</span>
</p>
</div>
</div>When I tried to run npm run dev, I encountered the following error: An error occurred while attempting to evaluate the fs argument statically [0] 50 | // Read file and split into lines [0] 51 | var map = {}, [0] > 52 | content = fs.read ...
I have successfully modified the code below to meet a new requirement. The current functionality involves splitting the Price field into Pounds and Pence based on the index of the . symbol. However, I now need to extend this functionality to split a Name ...
I'm trying to work with a simple form using react and redux-form. My goal is to gather all the field values from my form and send them to my RESTful API using jQuery ajax. Unfortunately, I've run into an issue where redux-form doesn't seem ...
Hey there, here is some HTML code that I need help with: <tbody> <tr> <td class="text-center"><input type="text" class="form-control cardSerialNumber"></td> <td class="text-center"><button type="button" onc ...
I am struggling to create a union type based on the keys of a Map. Below is a simple example illustrating what I am attempting to achieve: const myMap = new Map ([ ['one', <IconOne/>], ['two', <IconTwo/>], ['three ...
Struggling to develop an ajax form component in vuejs within a Laravel 5.3 application. It seems I am facing some challenges with displaying the form fields. Can someone lend me a hand? Here is the front end code for rendering the form: <ajax-form ...
Can someone help me troubleshoot why I keep receiving a 500 internal error when trying to execute an Ajax function? I attempted to send the response from view.py to the Ajax function in two different ways: using JsonResponse (see 'else' section i ...
After searching extensively for an answer and coming up empty-handed, I decided to pose my question here. When creating an object constructor in JavaScript as shown below: function Car(speed){ this.speed = speed; this.position = 0; } Car.prototype.m ...
Suppose I have an array structured like this. It contains objects with different values but the same date. [ { "date": "2020-12-31T18:30:00.000Z", "value": 450 }, { "date": "20 ...
My modal is almost working perfectly - it changes content based on the clicked image, but it is triggering twice in the backend and I can't figure out why! I followed Bootstrap's documentation for this, so I'm unsure where the issue lies. Al ...
I am attempting to make a single URL call that will fetch multiple URLs and store their JSON responses in an array, which will then be sent as the response to the end user. Here is what my code looks like: var express = require('express'); var ...
I am looking for a way to generate PNG thumbnails from saved stringified JSON data obtained from fabric.js. Currently, I store the JSON data in a database after saving it from the canvas. However, now I want to create a gallery of PNG thumbnails using thi ...
I've encountered an issue with using @media in the style tags of a VueJS component. Surprisingly, styling within the @media query works consistently, while applying styles based on width rules does not seem to have any effect. <template> &l ...
I have a MaterialTable with many columns, and some of them are not always necessary to display. I am looking for a way to hide these columns unless the user specifically selects them. I attempted to use the hidden: true property in the column configuratio ...
My Image is not showing up when I try to render it using image uri, and I'm not sure why. Here is the code snippet I'm using in a React Native project. import React from 'react'; import styled from 'styled-components/native'; ...
I'm attempting to find the time difference between two dates. If the difference is greater than or equal to 6 hours, an image should be displayed. However, the code is not functioning properly. <img v-else-if="dateList[0] > day.date >= ...
Could someone please help me identify the issue with this JavaScript code? "http://www.imdb.com/title/tt2618986/".match("~http://(?:.*\.|.*)imdb.com/(?:t|T)itle(?:\?|/)(..\d+)~i"); I tested it here https://regex101.com/r/yT7bG4/1 and it wo ...
(function(){ $(document).ready(function(){ $.getJSON('http://dev.markitondemand.com/MODApis/Api/v2/Quote/json?symbol=AAPL&callback=?', function(){console.log("function was run");}); }); }()) I recently delved into working with APIs. Ho ...
I am looking to update the background design of Mui Datagrid from this image to this image However, I am encountering an issue where the background color does not fully cover the header. I have attempted using "cellClassName:" in the columns but it has n ...
Is there a way to make a component that can function with or without an image? Currently, when the component doesn't have an image, other contents and styles disappear. How can I resolve this issue? App.Vue: <template> <div id="app&qu ...