We Keep Coding

vue #/src/assets/images/1.jpg: hasn't been transpiled yet error

**I'm getting this error - vue #/src/assets/images/1.jpg: hasn't been transpiled yet error. I'm looping through tha App component static array. The src is specified correctly though. Using require vue method.
https://codesandbox.io/s/eloquent-grass-j1usw8?file=/src/components/v-carousel-item.vue
**
// APP
<template>
<v-carousel :carousel_data="sliderItems" />
</template>
<script>
import vCarousel from "./components/v-carousel.vue";
export default {
name: "App",
data() {
return {
sliderItems: [
{ id: 1, name: "img1", img: "1.jpg" },
{ id: 2, name: "img2", img: "2.jpg" },
{ id: 3, name: "img3", img: "3.jpg" },
],
};
},
components: {
vCarousel,
},
};
</script>
// Parent
<template>
<div class="container">
<div class="v-carousel">
<v-carousel-item
v-for="item in carousel_data"
:key="item.id"
:item_data="item"
/>
</div>
</div>
</template>
<script>
import vCarouselItem from "./v-carousel-item.vue";
export default {
components: {
vCarouselItem,
},
props: {
carousel_data: {
type: Array,
default: () => [],
},
},
};
</script>
// Child
<template>
<div class="v-carousel-item">
<img :src="require(`../assets/images/` + item_data.img)" alt="" />
</div>
</template>
<script>
export default {
props: {
item_data: {
type: Object,
default: () => {},
},
},
};
</script>

You want to require the images upfront.
export default {
name: "App",
data() {
return {
sliderItems: [
{ id: 1, name: "img1", img: require("#/assets/images/1.jpg") },
{ id: 2, name: "img2", img: require("#/assets/images/2.jpg") },
{ id: 3, name: "img3", img: require("#/assets/images/3.jpg") },
],
};
},
Then update the carousel item component.
<div class="v-carousel-item">
<img :src="item_data.img" alt="" />
</div>
Example: https://codesandbox.io/s/little-bush-ino5zc?file=/src/components/v-carousel-item.vue:11-91

How to call array values dynamically from an existing array in Vuejs?

HelloWorld.vue
export const datalist = [
{ id: 1, val: "11", kk: "potter" },
{ id: 2, val: "22", kk: "james" },
{ id: 3, val: "55", kk: "limda" },
{ id: 4, val: "77", kk: "stepen" }
];
<template>
<div>
<b>Vuejs dynamic routing</b>
<div v-for="item in items" :key="item.id">
<b>{{ item.id }}.</b>
<router-link :to="{ name: 'UserWithID', params: { id: item.id } }">
{{ item.kk }}
</router-link>
</div>
<br /><br /><br />
<User />
</div>
</template>
<script>
import User from "./User.vue";
import { datalist } from "./datalist";
export default {
name: "HelloWorld",
components: {
User,
},
data() {
return {
items: datalist,
};
},
};
</script>
User.vue
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
import book from "./components/book.vue";
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{ path: "/", name: "User", component: HelloWorld },
{ path: "/", name: "BookWithID", component: book },
{ path: "/:id", name: "UserWithID", component: HelloWorld }
]
});
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App)
}).$mount("#app");
export const datalisttwo = [
{ id: 1, book: "steel", pen: "p1", gap: "1" },
{ id: 2, book: "iron", pen: "jp2", gap: "5" },
{ id: 3, book: "platinium", pen: "p3", gap: "2" },
{ id: 4, book: "gold", pen: "p4", gap: "9" }
];
<template>
<div>
<router-link :to="{ name: 'BookWithID' }">
{{ user.book }}
</router-link>
</div>
</template>
<script>
import { datalisttwo } from "./datalisttwo";
export default {
name: "User",
components: {},
data() {
return {
lists: datalisttwo,
};
},
computed: {
user: function () {
return this.lists.find((item) => item.id === this.$route.params.id);
},
},
};
</script>
As per the below code, in the datalisttwo.js I have array values like steel and pen Where i want to call both of them together like steel/pen as an api call in the mounted() .
When i click on the router-link, {{ user.book }} from User.vue component.
Ex:- I want to pass the pen/gap array values as query parameters. when clicked on {{ user.book }} from user.vue componet. Please go through codesandbox once, I tried adding computed property for pen and gap. But pen/gap --- but not calling dynamically
Here is my code:- https://codesandbox.io/s/new-hill-6yum4o?file=/src/components/User.vue

Your question and description is quite unclear, so I'll try to answer how I understand it. If that is not what you were expecting, try to explain it again clearly.
First, define your routes clearly. Here your have two routes pointing to '/'. Try to do it to have your user index at '/', your book at '/book/:id', and your user at 'user/:id'.
Second, I am unsure why you have your HelloWorld.vue in both User and UserWithId routes. If intended, disregard. If not, you should clean up that whole file to get the right route pointing to the right component.
Third, used on your example of potter, if you are looking at the book component, for which you haven't provided the code, you can do it such as:
...
computed: {
book() {
if (this.$route.params.id == null || this.$route.params.id == undefined) {
throw new Error('No book id provided')
}
return datalisttwo.find(_ => _.id == this.$route.params.id)
},
pen() {
this.book.pen
},
gap() {
this.book.gap
}
}
...
With this you'll be able to do whatever you whish with this.pen and this .gap.
Now, if you were to want to not import data list again, you can pass your retrieved pen & gap as query parameters: https://router.vuejs.org/api/

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import HelloWorld from "./components/HelloWorld.vue";
import book from "./components/book.vue";
Vue.use(VueRouter);
const router = new VueRouter({
routes: [
{ path: "/", name: "User", component: HelloWorld },
{ path: "/", name: "BookWithID", component: book },
{ path: "/:id", name: "UserWithID", component: HelloWorld }
]
});
Vue.config.productionTip = false;
new Vue({
router,
render: (h) => h(App)
}).$mount("#app");
export const datalisttwo = [
{ id: 1, book: "steel", pen: "p1", gap: "1" },
{ id: 2, book: "iron", pen: "jp2", gap: "5" },
{ id: 3, book: "platinium", pen: "p3", gap: "2" },
{ id: 4, book: "gold", pen: "p4", gap: "9" }
];
<template>
<div>
<router-link :to="{ name: 'BookWithID' }">
{{ user.book }}
</router-link>
</div>
</template>
<script>
import { datalisttwo } from "./datalisttwo";
export default {
name: "User",
components: {},
data() {
return {
lists: datalisttwo,
};
},
computed: {
user: function () {
return this.lists.find((item) => item.id === this.$route.params.id);
},
},
};
</script>
I ran this directly.
Error 1:
Imports must be at the top.
Look at 25, 0
Error 2:
Exports must be at the top
Look at 41, 8

How to fetch data with same name but in different interface in angular

I have two interface, one is cropFilter which is for checkbox filter and second interface is holding my data called Crop.
let me share my code for better understanding.
1. crop.model.ts
export class Crop { // Interface 1
name: string;
district: string
subCategory: Subcategory[];
}
export class Subcategory {
id: number;
name: string;
}
export class CropFilter { // Interface 2
name: string
checked: boolean
}
2. cropFilter.ts
import { CropFilter } from "./crop.model";
export const CROPSFILTER: CropFilter[] = [
{
name: "Rice",
checked: false
}, {
name: "Wheat",
checked: false
}, {
name: "Barley",
checked: false
}
]
The above interface is for checkbox filtration.
3. crop.data.ts
import { Crop } from "./crop.model";
export const CROPS: Crop[] = [
{
name: "Rice",
district: "Thane",
subCategory: [
{
id: 1,
name: "Basmati",
},
{
id: 2,
name: "Ammamore",
}
]
},
{
name: "Rice",
district: "Nashik",
subCategory: [
{
id: 1,
name: "Basmati",
},
{
id: 2,
name: "Ammamore",
}
]
},
{
name: "Wheat",
district: "Nashik",
subCategory: [
{
id: 1,
name: "Durum",
},
{
id: 2,
name: "Emmer",
}
]
},
{
name: "Barley",
district: "Ratnagiri",
subCategory: [
{
id: 1,
name: "Hulless Barley",
},
{
id: 2,
name: "Barley Flakes",
}
]
},
{
name: "Barley",
district: "Thane",
subCategory: [
{
id: 1,
name: "Hulless Barley",
},
{
id: 2,
name: "Barley Flakes",
}
]
}
];
This is the actual data. All I want to fetch data from crop.data.ts based on crop.filter.ts
for better clearance let me show you the html part as well :
1. all-trade.html
<div class="container" *ngIf="crops$ | async">
<div *ngFor="let item of cropFilterCheckbox$ | async; let i = index">
<mat-checkbox [checked]="item.checked" (change)="onChange($event, i, item)">
{{ item.name }}
</mat-checkbox>
</div>
<br />
<h4>JSON data:</h4>
<pre>
{{ cropFilterCheckbox$ | async | json }}
<div *ngFor="let crop of cropFilterCheckbox$ | async"
[hidden]="!crop.checked"
>{{ crop.name }}
</div>
<button type="button" class="btn">Basic</button>
</pre>
</div>
2. crop.service.ts
import { Injectable } from "#angular/core";
import { Observable, of } from "rxjs";
import { Crop, CropFilter, DistrictFilter } from "../shared/crop.model";
import { CROPS } from "../shared/crop.data";
import { CROPSFILTER } from '../shared/cropFilter';
#Injectable({
providedIn: "root"
})
export class CropService {
constructor() { }
crops: Crop[] = CROPS;
cropFilterCheckbox: CropFilter[] = CROPSFILTER;
getAllCrops(): Observable<Crop[]> {
return of(this.crops);
}
getCropFilter(): Observable<CropFilter[]> {
return of(this.cropFilterCheckbox)
}
getCrop(name: string): Observable<any> {
const crop = this.crops.filter(crop => crop.name === name)[0];
return of(crop);
}
}
The final output looks like this :
Now please guide me how to fetch data from crop.data.ts based on crop.filter.ts
Like when user check Rice checkbox, its should fetch all the details of Rice present in crop.data.ts file and display on the screen.

On checkbox change write an event handle like below. Maintain which are the checkbox user has checked in a variable "AppliedFilter" and then pass that array list to your service method.
onChange(status, name) {
if (status && this.appliedFilter.indexOf(name) === -1) {
this.appliedFilter.push(name);
} else {
this.appliedFilter = this.appliedFilter.filter((x) => x !== name);
}
this.crops$ = this.cropService.getCrop(this.appliedFilter);
}
In your service method based on that array filter your records like below.
getCrop(names: string[]): Observable<any> {
const crop = this.crops.filter((crop) => names.includes(crop.name));
return of(crop);
}
Here is the working sandbox.
https://codesandbox.io/s/filter-data-x2p0w?file=/src/app/app.component.ts:289-294

TypeError: Cannot read property 'map' of undefined Reactjs?

TypeError: Cannot read property 'map' of undefined Reactjs ?
I am working small quiz module but showing below error please help me for below error
TypeError: Cannot read property 'map' of undefined
i don't know how to solve i am new for react pease help me for this code
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Questionlist from './quiz/Questionlist.jsx';
import * as serviceWorker from './serviceWorker';
class Quiz extends React.Component {
constructor(props){
super(props);
this.state= {
questions : [
{
id: 1,
text: 'What is your name?',
choices:[
{
id: 'a',
text: 'Michael'
},
{
id: 'b',
text: 'Brand'
},
{
id: 'c',
text: 'Steven'
},
],
correct: 'b'
},
{
id: 2,
text: 'What is your mother name?',
choices:[
{
id: 'a',
text: 'Sara'
},
{
id: 'b',
text: 'Denny'
},
{
id: 'c',
text: 'senny'
},
],
correct: 'c'
},
{
id: 3,
text: 'What is your father name?',
choices:[
{
id: 'a',
text: 'Bobby'
},
{
id: 'b',
text: 'Harry'
},
{
id: 'c',
text: 'Waye'
},
],
correct: 'c'
},
{
id: 4,
text: 'What is your friend name?',
choices:[
{
id: 'a',
text: 'John'
},
{
id: 'b',
text: 'Paul'
},
{
id: 'c',
text: 'Jose'
},
],
correct: 'a'
},
],
score: 0,
current: 1
}
}
render() {
return <h2>I am a Car!</h2>;
}
}
class Garage extends React.Component {
render() {
return (
<div>
<Questionlist />
</div>
);
}
}
ReactDOM.render(<Garage />, document.getElementById('root'));
serviceWorker.unregister();
Questionlist.jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Question from './Question.jsx';
class Questionlist extends React.Component {
render() {
return(
<div className="question">
{
this.props.questions.map(questions => {
return <Question questions={questions} key={questions.id} {...this.props} />
})
}
</div>
)
}
}
export default Questionlist
Question.jsx
import React from 'react';
import ReactDOM from 'react-dom';
class Question extends React.Component {
render() {
const {question} = this.props;
return(
<div className="well">
<h3>{question.text}</h3>
<hr />
<ul className="list-group">
{
this.props.question.choices.map(choice =>{
return(
<li className="list-group-item">
{choice.id} <input type="radio" onChange={this.onChange.bind(this)} name={question.id} value={choice.id} /> {choice.text}
</li>
)
})
}
</ul>
</div>
)
}
}
export default Question

Pass your array to Questionlist component.
Try to remove your Garage component if there is no use because you have array(questions) in Quiz component. pass questions to Questionlist component from Quiz component.
instead of
render() {
return <h2>I am a Car!</h2>;
}
pass like this
render() {
return <Questionlist questions={this.state.questions} />
}
at the end change root component from Garage to Quiz
ReactDOM.render(<Quiz />, document.getElementById('root'));

To Questionlist your are not passing questions, it should be :
<Questionlist questions={this.state.questions} />

React v4 routing for dynamically created components

I have a list of objects that I'm using to create ReportCard components. When the user clicks on one of these ReportCards, I would like it to route to a ReportDetail component, getting the ID property of the ReportCard passed via URL params. The problem is the Match.Params object being received by the ReportDetail component returns as params: {id: ":id"}. I think the way I'm creating these components is what is causing the problem.
I've tried changing how the ReportCard components are being generated. By changing the level of where as well as the tags.
Report Area components creates the ReportCard components based on the amount of report objects.
Each ReportCard component has a link tag.
All ReportCard components have 1 Route tag.
I would like to pass the report.id from ReportCard into the Route URL parameter for ReportDetail.
Appreciate any help, sorry for all the code.
Report List:
export const reports = [
{
id: 1,
name: "Report 1",
company: "Company, Inc",
description: "Charts"
},
{
id: 2,
name: "Report 2",
company: "Company, Inc",
description: "Charts 2"
},
{
id: 3,
name: "Report 3",
company: "Company, Inc",
description: "Charts 3"
},
{
id: 4,
name: "Report 4",
company: "Company, Inc",
description: "Charts 4"
},
{
id: 5,
name: "Report 5",
company: "Company, Inc",
description: "Charts 5"
},
{
id: 6,
name: "Report 6",
company: "Company, Inc",
description: "Charts 6"
},
]
Report Area:
interface DetailParams {
id: string;
}
interface DetailsProps {
required: string;
match ? : match <DetailParams> ;
}
export interface IAppState {
reports: any[];
}
export default class ReportArea extends React.Component <DetailsProps,
IAppState> {
constructor(props: DetailsProps & IAppState) {
super(props);
this.state = reports;
}
public render() {
var groupSize = 2;
var rows = this.state.reports.map(function(report) {
return <Link to = "/reports/:id"><ReportCard md={3}
key = {report.id}><ReportCard></Link > ;
}).reduce(function(row, element, index) {
index % groupSize === 0 && row.push([]);
row[row.length - 1].push(element);
return row;
}, []).map(function(rowContent, index) {
return <Row key = {index}> {rowContent}</Row>;
});
return <div className = "windowlayout"> {
rows}<Route path = '/reports/:id'
component = {ReportDetail}/> </div>;
}
}
ReportCard Component:
export default class ReportCard extends React.Component<DetailsProps,
any> {
props: any;
constructor(props: DetailsProps) {
super(props);
}
public render() {
const match = this.props.match
return (
<div>
<Card className="subPanel" key={this.props.id}>
<CardImg className="imagesec" src="https://via.placeholder.com/150"
alt="Card image cap" />
</Card>
</div>
);
}
}
ReportDetail Component:
interface DetailParams {
id: string;
}
interface DetailsProps {
required: string;
match?: match<DetailParams>;
}
export default class ReportDetail extends React.Component<DetailsProps,any>
{
props: any;
constructor(props: DetailsProps) {
super(props);
}
public render() {
const {match} = this.props;
return (
<div>
<h2>
{match.params.id}
</h2>
</div>
)
}
}

The issue is <Link to = "/reports/:id">. This syntax is what you want for the Route, but for the link you should have the actual id. Something like:
const path = "/reports/" + report.id;
return <Link to = {path}>...