use fetched info in an array in vue.js - javascript

I have this array:
data() {
return {
landingInfo: null,
slides: [
{
title: `this`,
},
{
title: "that",
},
{
title: "those",
},
],
};
},
Which is being displayed this way:
<div
class="slide"
v-for="(slide, index) in slides"
:key="index",
}"
>
<div>
<h1 class="text-bold">{{ slide.title }}</h1>
</div>
The problem is that I'm fetching info from and api and once I try to do:
slides: [
{
title: {{ landingInfo.data.subtitle }},
},
{
title: {{ landingInfo.data.subtitle2 }},
},
{
title: {{ landingInfo.data.subtitle3 }},
},
],
Everything explodes, I am new in vue using Nuxt.js and I cannot find any solution in how to achieve that.
Can someone show me how to include the fetched info inside the array property?
PD: I already tried using "{{thefetchedinfo}}" but it takes it literally that way and displays "{{thefetchedinfo}}"

The OP doesn't provide much info on the fetch, like when it is performed or what the returned data looks like, but the common pattern goes like this...
// <template> as in the OP, then...
data() {
return {
landingInfo: null,
slides: [], // empty before the fetch
};
},
mounted () {
fetchFromTheAPI().then(landingInfo => {
// More commonly, you'd map over the returned data to form slides,
// or, trying to match the OP...
this.slides = [
{ title: landingInfo.data.subtitle },
{ title: landingInfo.data.subtitle2 }, // ... and so on
]
});
},

Related

How to make multi-dementional arrays with array lists wiht axios and vue js

I am quite new to the axios and javascript and I am so confused with making multi-dimentional array.
1. I want my data to look like :
userList: [
{
user_no: 1,
user_nickname: "hailey",
},
{
user_no: 2,
user_nickname: "mandi",
},
{
user_no: 3,
user_nickname: "loren",
},
{
user_no: 4,
user_nickname: "james",
},
],
2. But from axios response, I am getting result like this :
{user_no : 1, user_nickname : "hailey"}
{user_no : 2 , user_nickname : "mandi"}
{user_no : 3 , user_nickname : "loren"}
{user_no : 4 , user_nickname : "james"}
How can I wrap those individual lists into multi dimentional array so I can make #2 -> #1 ?
I saw some functions like flat which does the opposite of what I want. So I was wondering if there's any way like those to wrap all arrays with outer array.
I did not see any issues with the axios response you are getting. As v-data-table need an array to iterate and you are getting the same from the API response.
Working Demo :
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
dataList: [{
"user_no": 1,
"user_nickname": "hailey"
},
{
"user_no": 2,
"user_nickname": "mandi"
},
{
"user_no": 3,
"user_nickname": "loren"
},
{
"user_no": 4,
"user_nickname": "james"
}]
}),
computed: {
gridHeaders() {
return [
{ text: "User Number", value: "user_no" },
{ text: "User Nickname", value: "user_nickname" }
];
},
},
})
<script src="https://cdn.jsdelivr.net/npm/vue#2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify#2.5.0/dist/vuetify.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
<v-data-table :headers="gridHeaders" :items="dataList" item-key="user_no">
</v-data-table>
</div>
I was being stupid.
As the answer above said, there is nothing wrong with my data or code. But when I was getting data, the objects are actually insde the data so the structure was like this :
response.data.data //i was calling it response.data ^^:;
Thank you for help :D

How to $set a property to multiple objects in an array but have retain individual reactivity in vue js

In my case, I have data array with multiple objects
data() {
return {
selected: 0,
presetData: [true, true, true],
data: [
{
name: "name 1"
},
{
name: "name 2"
}
]
};
},
then I want to push inside each object in data like below
setNewData() {
this.data.forEach((o, i) => {
this.$set(this.data[i], "time", this.presetData);
});
},
now my with presetData pushed into data will look like this
data: [
{
name: "name 1",
time: [true, true, true]
},
{
name: "name 2",
time: [true, true, true]
}
]
and I want to change individual time property of each object, which I use something like below
$set(item.time,selected,true)
My Issue
my issue is, this going to change both objects time property. How do I first push/set correctly presetData to data, below is my entire code , I'm sorry I'm very new to programming, here is the link to jsfiddle
new Vue({
el: "#app",
data() {
return {
selected: 0,
presetData: [true, true, true],
data: [
{
name: "name 1",
},
{
name: "name 2",
}
]
};
},
methods: {
setNewData() {
this.data.forEach((o, i) => {
this.$set(this.data[i], "time", this.presetData);
});
},
}
})
<div id="app">
<button #click="setNewData">Set Data</button>
<br>
<br>
<select v-model="selected">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<div v-for="item in data" :key="item.id">
<p>{{item.name}}</p>
<p>{{item.time}}</p>
<button #click="$set(item.time,selected,true)">Change True</button>
<button #click="$set(item.time,selected,false)">Change False</button>
</div>
This is an object reference issue. Each of your time properties references the same array (presetData). You can break out of this problem by making shallow copies via spread syntax.
You can also avoid Vue.set() when assigning new data using the same technique
setNewData() {
this.data = this.data.map(d => ({
...d, // create a shallow copy of each data item
time: [...this.presetData] // add "time" as a shallow copy of presetData
}))
},
To change individual array elements within the time property, you need to continue using Vue.set(), ie
this.$set(item.time, selected, true)

Vue, after push to array, all properties react simultaneously [duplicate]

In my case, I have data array with multiple objects
data() {
return {
selected: 0,
presetData: [true, true, true],
data: [
{
name: "name 1"
},
{
name: "name 2"
}
]
};
},
then I want to push inside each object in data like below
setNewData() {
this.data.forEach((o, i) => {
this.$set(this.data[i], "time", this.presetData);
});
},
now my with presetData pushed into data will look like this
data: [
{
name: "name 1",
time: [true, true, true]
},
{
name: "name 2",
time: [true, true, true]
}
]
and I want to change individual time property of each object, which I use something like below
$set(item.time,selected,true)
My Issue
my issue is, this going to change both objects time property. How do I first push/set correctly presetData to data, below is my entire code , I'm sorry I'm very new to programming, here is the link to jsfiddle
new Vue({
el: "#app",
data() {
return {
selected: 0,
presetData: [true, true, true],
data: [
{
name: "name 1",
},
{
name: "name 2",
}
]
};
},
methods: {
setNewData() {
this.data.forEach((o, i) => {
this.$set(this.data[i], "time", this.presetData);
});
},
}
})
<div id="app">
<button #click="setNewData">Set Data</button>
<br>
<br>
<select v-model="selected">
<option>0</option>
<option>1</option>
<option>2</option>
</select>
<div v-for="item in data" :key="item.id">
<p>{{item.name}}</p>
<p>{{item.time}}</p>
<button #click="$set(item.time,selected,true)">Change True</button>
<button #click="$set(item.time,selected,false)">Change False</button>
</div>
This is an object reference issue. Each of your time properties references the same array (presetData). You can break out of this problem by making shallow copies via spread syntax.
You can also avoid Vue.set() when assigning new data using the same technique
setNewData() {
this.data = this.data.map(d => ({
...d, // create a shallow copy of each data item
time: [...this.presetData] // add "time" as a shallow copy of presetData
}))
},
To change individual array elements within the time property, you need to continue using Vue.set(), ie
this.$set(item.time, selected, true)

How to return value from loop. js, vuejs

Sorry, I'm beginner with JS,i have a basic question, but i spent a whole day trying to find answer in google and i didn't.
I have a massic financial instrument developed on php and I need to build complex financial calculator that shows everything with reactivity. I need help to figure out how to make complex calculations with many if statements inside of the loop and then sum output value from each object in array and return total summed value. Using Vuejs for this.
So my cashDividends() must be a sum of calculated values from each object in the loop.
Below I put a piece of code to understand problem I'm facing.
Please check if have a minute. Thanks!
new Vue({
el: "#waterfall",
data() {
return {
info: {
cash_dividends: true,
converted_liabilities: true,
},
equities: [
#foreach($preferredEquities as $equity)
{ name: '{{ $equity->name }}', id: {{ $equity->id }} },
#endforeach
]
}
},
computed: {
remainingExit () {
return this.form.exit_value - this.form.uncovered_debt - this.form.transaction_fees
},
cashDividends() {
//I supposed should be something like this.
this.equities.forEach(function(equity)
{
//Here I make a lot of calculations with bunch of if statements using object and DOM input values. for each object
}
// And here I need to return sum of calculated values from each object (equity) in array
}
},
You could use reduce function which you could learn more about here:
new Vue({
el: "#app",
data: {
equities: [{
name: "Serias A",
price: 20
},
{
name: "Serias B",
price: 21
},
]
},
computed: {
cashDividends() {
return this.equities.reduce(this.sum);
}
},
methods: {
sum(total, num) {
return total.price + num.price
}
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.min.js"></script>
<div id="app">
{{cashDividends}}
</div>
Use reduce function
new Vue({
el: "#waterfall",
data: {
equities: [
{name: "Serias A", price: '20'},
{name: "Serias B", price: '21'},
]
},
computed: {
cashDividends() {
var sum = this.equities.reduce(function(acc, equity) {
return acc + parseInt(equity.price);
}, 0)
}
}
});
You can define a variable sum and iteratively add equity.price to it as follows:
cashDividends() {
let sum = 0
this.equities.forEach(function(equity)) {
sum+=equity.price
}
return sum
}

bootstrap-vue - table won't get updated after AJAX request (vue2.js)

I'm pretty new with vue.js and I saw this great library that doing exactly what I need for my project: Boostrap-Vue
example source code
I followed the basic instructions and I've added an small change, ajax call for dynamic content:
<layout :docs="docs">
<template slot="demo">
<b-table
stripped
hover
:items="items"
:fields="fields"
:current-page="currentPage"
:per-page="perPage"
:filter="filter"
>
<template slot="name" scope="item">
{{item.value.first}} {{item.value.last}}
</template>
</b-table>
</template>
</layout>
export default {
mounted () {
this.get_data();
},
data() {
return {
docs: {
component: 'bTable'
},
items: [],
fields: {
name: {label: 'Person Full name', sortable: true},
},
currentPage: 1,
perPage: 5,
filter: null
};
},
methods: {
get_data () {
this.$http.get("myapp/users").then(res => {
if (res.body) {
this.items = res.body;
} else {
this.error = true;
}
});
}
}
};
So the problem is - after I'm getting the Ajax response and the "items" variable initialized with the data but the table still won't get update.
The strangest part is that with static data its works fine (as shown in the example source code, without AJAX).
Any idea why?
Thanks!!!
I found the problem, it seems that it necessary to define the following fields according to the value I received in the response:
fields: {
name: {label: 'Person Full name', sortable: true},
}
so if my json looks like this:
{user_name: "user"}
it should look like this:
fields: {
user_name: {label: 'Person Full name', sortable: true},
}
Anyway, Yoram de Langen Thanks for the help!
Did you try to debug the res.body and what it contains? What is the structure your myapp/users returns? Do you return the structure directly like so:
[
{ "name": "item 1"},
{ "name": "item 1"},
]
or does it look like this:
{
"result": [
{ "name": "item 1"},
{ "name": "item 1"},
]
}
In case of the latest one your this.items = res.body should be: this.items = res.body.result

Categories