We Keep Coding

Display data from object in Strapi

When I write {{ posts }} I see this object but when I want to display it in a v-for, it doesn't show up.
This is what I have by using {{ posts }}
{
"data": [
{
"id": 1,
"attributes": {
"title": "Post numer jeden",
"content": "tresc w poscie numer jeden",
"createdAt": "2022-10-27T17:51:40.396Z",
"updatedAt": "2022-10-27T17:51:44.406Z",
"publishedAt": "2022-10-27T17:51:44.405Z"
}
},
{
"id": 2,
"attributes": {
"title": "Post numer dwa",
"content": "Tresc w poscie numer dwa",
"createdAt": "2022-10-27T17:52:06.344Z",
"updatedAt": "2022-10-27T17:52:07.669Z",
"publishedAt": "2022-10-27T17:52:07.668Z"
}
}
],
"meta": {
"pagination": {
"page": 1,
"pageSize": 25,
"pageCount": 1,
"total": 2
}
}
}
<template>
<p>{{ posts }}</p>
<div v-for="post in posts" :key="post">
<hr />
<h3>{{ post.title }}</h3>
<p>dsdsa</p>
</div>
</template>
<script>
import axios from "axios";
export default {
data() {
return {
posts: [],
};
},
async created() {
const res = await axios.get("http://localhost:1337/api/posts");
this.posts = res.data;
},
};
</script>

This is a common issue, solved by going one level down.
Try the following
<div v-for="post in posts.data" :key="post.id">

Vue method to list each object in an array of objects leads to errors

This is the dropdown component used to give a list of all grids in all pages. There are multiple pages and grids within those pages.
<v-dropdown
:items="pageGrids"
:item-text="gridNamesAndPages"
return-object
/>
gridNamesAndPages is under methods:
gridNamesAndPages: item => item.name + ' • (Page: ' + item.page_name.name + ')',
This is the method used to assign the empty array summaryGrids to all grids for this project:
getAllPageGrids() {
apiClientGet(
routes["pages.getAllPageGrids"],
null,
response => {
this.pageGrids.push(response.data);
}
);
},
The function in the controller:
public function getAllPageGrids()
{
return Auth::user()->client->grids()->get();
}
SummaryGrids are in this format. There could be multiple grids so whilst this only shows 3 there could be 100:
[
{
"id": 3,
"name": "AS",
"grid_cols": [
{
"id": 16,
"grid_id": 3,
"order": 1,
"header": "Col 1",
}
],
"page_name": {
"name": "Page 1"
}
},
{
"id": 4,
"name": "SF",
"grid_cols": [
{
"id": 21,
"grid_id": 4,
"header": "Name",
},
{
"id": 22,
"grid_id": 4,
"header": "Reference",
}
],
"page_name": {
"name": "Page 1"
}
},
{
"id": 5,
"name": "WE",
"grid_cols": [
{
"id": 24,
"grid_id": 5,
"header": "Name",
}
],
"page_name": {
"name": "Page 2"
}
}
]
However I continue to get this error:
I can't see anything wrong with the way the code is structured. Would anyone know if I've actually written it incorrectly?
(On request I've also included the custom v-dropdown component)
<template>
<v-select
:class="`text-field-${color || 'white'}`"
outlined dense
v-on="$listeners" v-bind="$attrs"
>
<slot>
<!-- -->
</slot>
</v-select>
</template>
<script>
export default {
props: {
color: {
type: String|null,
default: null
}
},
};
</script>

Angular grouped array slice in *ngfor

I have two arrays in one array item and inside one i only need to show 10 items
my array is like this
this.groupedData = [{
"title": true,
"name": "related",
"list": [{
"id": 30,
"text": "CIGA",
"related": true,
"list": [
]
},
{
"id": 34,
"text": "GAP",
"related": true,
"list": [
]
},
{
"id": 35,
"text": "LEVIS",
"related": true,
"list": [
]
},
{
"id": 36,
"text": "MANGO",
"related": true,
"list": [
]
},
{
"id": 37,
"text": "Nigel",
"related": true,
"list": [
]
},
{
"Id": 39,
"text": "Test",
"related": true,
"list": [
]
}
],
"selected": false,
"disabled": false
},
{
"title": true,
"name": "unrelated",
"list": [{
"id": 29,
"text": "Burger",
"related": false,
"list": [
]
}
],
"selected": false,
"disabled": false
}
]
i am looping list array and need to set only 10 items in one <Ul> tag list items in both arrays and need to loop 10 item list <ul> according to that optionColumnLength has number of columns need to show and that array looks like  [0, 1, 2] html is look like this
<div *ngFor="let colindex of optionColumnLength">
<ul class="item2">
<div *ngFor="let group of groupedData let j = index;">
<label>{{group.name}}</label>
<li *ngFor="let item of group.list | slice: colindex * 10: colindex * 10 + 10 | multiSelectFilter:filter; let i = index;" (click)="onItemClick($event,item)" class="multiselect-item-checkbox">
<div class="dd-list-row">
<div class="dd-list-block">
<input type="checkbox" aria-label="multiselect-item" [class.disabled-selected]="disabled"
[checked]="isSelected(item)" [disabled]="disabled || (isLimitSelectionReached() && !isSelected(item)) || item.isDisabled" />
<div>{{item.text}}</div>
</div>
</div>
</li>
<li class='no-data' *ngIf="_data.length == 0">
<h5>{{_settings.noDataAvailablePlaceholderText}}</h5>
</li>
</div>
</ul>
</div>
this is the current view and i only need to show 10 items in one column and if more than that it need to show in another 10 item column
current view image

VusJs: Error in render: "Type Error: Cannot read property 'data' of undefined"

enter image description here
i request data from API and data was succesfuly, but i get this error
<template>
<!-- <h1>{{ hasil }}</h1> -->
<div>
<div v-for=" h in hasil.data.data " :key="h.id">
<div class="card blue-grey darken-1 left-align">
<div class="card-content white-text">
<span class="card-title">Title: {{ h.title }} | ID: {{ h.id }}</span>
<p>Body: {{ h.body }}</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
name: 'ListArticle',
data () {
return {
hasil: []
}
},
created () {
axios.get('http://xxx.xxxxx.com/api/laravel')
.then(response => (this.hasil = response))
}
}
</script>
here the value
{
"current_page": 1,
"data": [
{
"id": 10,
"user_id": 1,
"category_posts_id": 1,
"title": "jjjjj kkkkk",
"body": "jjjjj kkkkkkkkkkkkkkk",
"slug": "jjjjj-kkkkk",
"active": 1,
"file_name": "phpheEduN.PNG",
"original_file_name": "Capture.PNG",
"file_path": "storage/app/public",
"created_at": "2018-05-01 13:00:13",
"updated_at": "2018-05-01 13:00:13",
"url": "xxx"
},
{
"id": 9,
"user_id": 1,
"category_posts_id": 1,
"title": "asaaaaaaa jhabsd",
"body": "aaa kjjkj",
"slug": "xxx",
"active": 1,
"file_name": "phpcUz7qV.PNG",
"original_file_name": "Capture.PNG",
"file_path": "storage/app/public",
"created_at": "2018-05-01 12:38:46",
"updated_at": "2018-05-01 12:38:46",
"url": ""
},
{
"id": 8,
"user_id": 1,
"category_posts_id": 1,
"title": "hkbakjbcscsdcsd",
"body": "alsdjnblsjdccsdsfsdfdsffsfs",
"slug": "hkbakjbcscsdcsd",
"active": 1,
"file_name": "php1LDUPr.PNG",
"original_file_name": "Capture.PNG",
"file_path": "storage/app/public",
"created_at": "2018-05-01 12:33:46",
"updated_at": "2018-05-01 12:33:46",
"url": ""
},
{
"id": 1,
"user_id": 1,
"category_posts_id": 1,
"title": "test title",
"body": "test body",
"slug": "test-title",
"active": 1,
"file_name": "",
"original_file_name": "",
"file_path": "",
"created_at": null,
"updated_at": null,
"url": ""
}
],
"first_page_url": "xxx",
"from": 1,
"last_page": 1,
"last_page_url": "xxx",
"next_page_url": null,
"path": "xxx",
"per_page": 5,
"prev_page_url": null,
"to": 4,
"total": 4
}

vue can't resolve data when vnode created,you can modify your code like this:
export default {
name: 'ListArticle',
data () {
return {
hasil: {data:{data:[]}}
}
},
created () {
axios.get('http://xxx.xxxxx.com/api/laravel')
.then(response => (this.hasil = response))
}
}
or like this:
<template>
<!-- <h1>{{ hasil }}</h1> -->
<div>
<div v-for=" h in hasil.data " :key="h.id">
<div class="card blue-grey darken-1 left-align">
<div class="card-content white-text">
<span class="card-title">Title: {{ h.title }} | ID: {{ h.id }}</span>
<p>Body: {{ h.body }}</p>
</div>
<div class="card-action">
This is a link
This is a link
</div>
</div>
</div>
</div>
</template>
export default {
name: 'ListArticle',
data () {
return {
hasil: {data:[]}
}
},
created () {
axios.get('http://xxx.xxxxx.com/api/laravel')
.then(response => (this.hasil = response.data))
}
}

The reason why you're getting the error Type Error: Cannot read property 'data' of undefined is because you're trying to accessthis when the arrow notation function in the axios request changes the this reference. You'd actually want to do something like this instead:
import axios from 'axios'
export default {
name: 'ListArticle',
data () {
return {
hasil: []
}
},
created () {
// Create reference to this so you can access the Vue
// reference inside arrow notation functions
var self = this;
axios.get('http://xxx.xxxxx.com/api/laravel')
.then(response => (self.hasil = response))
}
}

Generate dynamic data field using child component

I want to generate dynamic data field using value of prop passed in child component.
Code:
...
<datafieldcheckbox :categories="abc" #call-method="callfilteredproducts"></datafieldcheckbox>
new Vue({
el: "#app",
data: {
abc: null, // this will generate based on a value of prop passed in child component.
products: [
{
"id": "1",
"name": "Product1",
"abc": "EEE",
"skill": "Easy",
"color": "blue",
"price": 100.00
},
{
"id": 2,
"name": "Product2",
"abc": "EEE",
"skill": "Intermediate",
"color": "red",
"price": 120.00
},
{
"id": 3,
"name": "Product3",
"abc": "Office",
"skill": "Intermediate",
"color": "green",
"price": 190.00
}
]
...
const dfCheckBox = Vue.component('datafieldcheckbox', {
template: `<div id="one">
<h4><strong>Categories</strong></h4>
<ul class="categoriesFilter">
<li v-for="category in categories"><label><input type="checkbox" :id="category" :value="category" v-model="selectedFilters.categories" #click="filterProducts()"><span class="categoryName">{{category}}</span></label></li>
</ul>
</div>`,
data() {
return{
products : null,
selectedFilters: {
categories: [],
colors: [],
minPrice: null,
maxPrice: null
}
}
},
props : ['categories'],
methods: {
filterProducts(){
this.$emit('call-method', this.selectedFilters);
}
}
});
like in above code If I write abc then it will generate this kinda code in parent data:
Now let's say I have data in products and I want to find unique values of a key that is passed from child props.

Just pass the product array to child component and filter the category by checkbox. pls try this
template
<!-- child -->
<script type="text/x-template" id="grid-template">
<div>
<h2>
category list:
</h2>
<ul>
<li v-for="category in categories">
<label>{{category.abc}}</label>
<input type="checkbox" :value="category" v-model="selectedCategory" #change="emitback(selectedCategory)"/>
</li>
</ul>
</div>
</script>
<!-- parent -->
<div id="demo">
<h2>
selected category:
</h2>
<ul>
<li v-for="category in selectedCategory">
{{category.abc}}
</li>
</ul>
<datafieldcheckbox :categories="product" #call="callfilteredproducts"></datafieldcheckbox>
</div>
script
Vue.component('datafieldcheckbox', {
template: '#grid-template',
props: {
categories: Array,
},
created(){
console.log(this.categories);
},
data: function () {
return {
selectedCategory:[]
}
},
methods: {
emitback(selectedVal){
this.$emit('call',selectedVal);
}
}
})
// bootstrap the demo
var demo = new Vue({
el: '#demo',
data: {
selectedCategory:[],
product:[
{
"id": "1",
"name": "Product1",
"abc": "EEE",
"skill": "Easy",
"color": "blue",
"price": 100.00
},
{
"id": 2,
"name": "Product2",
"abc": "EEE",
"skill": "Intermediate",
"color": "red",
"price": 120.00
},
{
"id": 3,
"name": "Product3",
"abc": "Office",
"skill": "Intermediate",
"color": "green",
"price": 190.00
}
]
},
methods:{
callfilteredproducts(event){
console.log(event);
this.selectedCategory = event
}
}
})
demo Jsfiddle