when looping through some API data in Vue. to get the value that is displayed in my braces { currency.description } and post that to my db.

there is tried for example PostService.insertPost(e.target.innerHTML);

Also have tried this.$refs.criteria[0].innerHTML

When console logged it shows exactly what I need, but when posted to the db it shows null.

vue.js template

<ul v-bind:key=”currency.id” ref=”criteria” v-for=”currency in info”>
<li id=”criteria” v-on:click=”apiTest” >{ currency.description }</li>
</ul>

JS

apiTest(e) {
console.log(e.target.innerHTML);
await PostService.insertPost(e.target.innerHTML);
}

data() {
return{
info: [],

My goal is to get the string value of currency.description into my db, instead of it showing up as null. when guessing it has to do with my info array in my returned data, when not sure how to go about it though.

Solution :

You want to make the loop on the li-element instead, and pass the description to the click function you’re calling, like so:

// Template
<template>
<ul>
<li
v-for=”currency in info”
v-bind:key=”currency.id”
v-on:click=”apiTest(currency.description)”>
{currency.description }
</li>
</ul>
</template>

// Method / Click function
async apiTest(description) {
await PostService.insertPost(description);
}

Solution 2:

Try using await PostService.insertPost(currency.description); in $nextTick function. I think the problem may be the delay in loading the DOM since it is looping the list items.

Solution 3:

<ul>
<li v-for=”currency in info” :id=”currency.id” @click=”apiTest(currency)”>{ currency.description } </li>
</ul>

apiTest: function (currency){
//You can get the html element
//var element = document,getElementById(currency.id)
console.log(currency.description);
await PostService.insertPost(currency.description);

}

when toggling one element and at that time, want to bind style another element. But I didn’t understand how to achieve this with @click

data(){
return {
show:false,
filterStyle: {
top: 0,
background: “#dfe4ea”,
marginTop: “15px”,
marginBottom: “15px”,
},
}
}

methods: {
closing(){
this.show = !this.show
},
}

<p class=”closeMap” @click=”closing()”>close</p>

closing div below.

<div v-show=”!show”></>

changing styles div below.

<div :style=”filterStyle” class=”filter”></div>

Is there someone can explain it to me?

Edit: By the way, as you see when binding my styles, no problem with that. But not by @click… to bind those styles by @click.

Solution :

I don’t know if you want to add style on show or !show, anyway you can achieve it in this way:

<div :style=”show ? filterStyle : null” class=”filter”></div>

filterStyle will be applied only when show is true

Solution 2:

I guess you could make a computed property, which changes based on this.show:

// Template
<div :style=”filterStyle” class=”filter”></div>

// Computed property
computed: {
filterStyle() {
if (this.show) {
return {
top: 0,
background: ‘#dfe4ea’,
marginTop: ‘15px’,
marginBottom: ‘15px’
};
} else {
return ‘’;
}
}
}

You could also set filterStyle to something else in the click function

I would like to create a checkout object via the GraphQL API provided by the Saleor eCommerce platform.

According to the gql playground there is a mutation to do so that takes a CheckoutCreateInput object as it’s argument.

Here is an example mutation that works fine within the playground.

Here is the current code that there is tried (when doing this within a vuex action)

export const actions = {
addToCart({ commit, dispatch }, cartItem) {
const currentCartItems = this.state.cartItems
// Check to see if we already have a checkout object
if (this.state.checkoutId !== ‘’) {
// Create a new checkout ID
console.log(‘creating new checkout object’)
try {
this.app.apolloProvider.defaultClient
.mutate({
mutation: CREATE_CART_MUTATION,
variables: {
checkoutInput: {
lines: { quantity: 10, variantId: ‘UHJvZHVjdFZhcmlhbnQ6NQ==’ },
email: 'test@test.com‘
}
}
})
.then(({ data }) => {
console.log(data)
})
} catch (e) {
console.log(e)
}
} else {
console.log(‘checkout id already set’)
}

// TODO: Check to see if the cart already contains the current Cart Item

commit(‘ADD_CART_ITEM’, cartItem)
}

and here is the CREATE_CART_MUTATION:

import gql from ‘graphql-tag’

export const CREATE_CART_MUTATION = gql`
mutation($checkoutInput: CheckoutCreateInput!) {
checkoutCreate(input: $checkoutInput) {
checkout {
id
created
lastChange
lines {
id
variant {
id
name
}
quantity
totalPrice {
gross {
localized
}
net {
localized
}
}
}
totalPrice {
gross {
localized
}
net {
localized
}
}
}
}
}
`

On the server this comes back with the following error:

graphql.error.base.GraphQLError: Variable “$checkoutInput” got invalid value {“email”: “test@test.com“, “lines”: {“quantity”: 10, “variantId”: “UHJvZHVjdFZhcmlhbnQ6NQ==”}.
In field “lines”: In element #0: Expected “CheckoutLineInput”, found not an object.

Solution :

Looks like I was most of the way there, I was just passing a single lines object rather than an array of them. The correct code is as follows:

try {
this.app.apolloProvider.defaultClient
.mutate({
mutation: CREATE_CART_MUTATION,
variables: {
checkoutInput: {
lines: [
{ quantity: cartItem.quantity, variantId: cartItem.variantId }
],
email: 'test@test.com‘
}
}
})
.then(({ data }) => {
console.log(‘mutation done!’)
commit(‘SET_CHECKOUT_OBJECT’, data.checkoutCreate.checkout)
})
} catch (e) {
console.log(‘error:’)
console.log(e)
}

to have two arrays filled with dates. The first one should have those dates in string-format and the second should be the same dates as date-objects.

methods: {
test() {
let employments = [
{ begin: ‘01.01.2000’, end: ‘01.01.2010’ },
{ begin: ‘01.01.3000’, end: ‘01.01.3010’ },
{ begin: ‘01.01.4000’, end: ‘01.01.4010’ }
];
let items = [];
for(let i = 0; i < employments.length; i++) {
items.push(employments[i]);
}
for(let i = 0; i < items.length; i++ ) {
// splitting it up for the correct format
let begin = items[i].begin.split(‘.’).reverse().join(‘-‘);
let end = items[i].end.split(‘.’).reverse().join(‘-‘);
items[i].begin = new Date(begin);
items[i].end = new Date(end);
}
console.log(‘items:’);
console.log(items);
console.log(‘this.employments:’);
console.log(employments);
}
}

I expected to have two different outputs. One with strings in it and the other one with date objects. What I got instead were two arrays with date objects. And I just don’t get why.

I also tried directly giving employments to items (like “let items = employments;” ) instead of doing the push-method, but this didn’t work either.

Thanks in advance

Solution :

You are need to push() a copy of object. the object is shallow object so you can use spread operator to create a copy.

for(let i = 0; i < employments.length; i++) {
items.push({…employments[i]});
}

Or simply you can do

const items = employments.map(x => ({…x}))

You don’t need to create another array and then push into it. Just use map() on the employments and change both the properties. Moreover use a separate function for creating Date objects.

methods: {
test() {
let employments = [
{ begin: ‘01.01.2000’, end: ‘01.01.2010’ },
{ begin: ‘01.01.3000’, end: ‘01.01.3010’ },
{ begin: ‘01.01.4000’, end: ‘01.01.4010’ }
];
const format = str => new Date(str.split(‘.’).reverse().join(‘-‘));

let items = employments.map(({end,start}) =>
({
end: format(end),
start:format(start)
})
)

}
}

when using this vue.js Multiselect component.

there is 8 dropdown multi-select elements on my form.

When selecting an option from the second dropdown, the onSearchResellerCompanies method gets triggered, instead of the onSearchAgencyCompanies method.

Another thing …

On my form, there is a dropdown element with countries.

If I select a reseller company, and if I then select a country and then select an agency company, the onSearchEnumCountries gets triggered, instead of the onSearchAgencyCompanies method.

So, in all cases, the @search-change event from the last touched dropdown element gets triggered, instead of the onSearchAgencyCompanies method.

This is the html code:

This is the resellect companies dropdown element:

<multiselect
id=”multiselect_drop_down_reseller_companies”
v-model=”drop_down_reseller_companies_selected”
track-by=”id”
label=”name”
:multiple=”false”
:options=”reseller_companies”
:searchable=”true”
:loading=”drop_down_reseller_companies_selectize_isLoading”
:placeholder=”drop_down_reseller_companies_selectize_placeholder”
@select=”drop_down_reseller_companies_at_select”
:preselectFirst=”true”
:allowEmpty=”false”
deselectLabel=”Selected”
:clearOnSelect=”true”
@search-change=”onSearchResellerCompanies”>

<span slot=”noResult”>custom no result reseller companies</span>
<span slot=”noOptions”>custom no options reseller companies</span>

</multiselect>

This is the agency companies dropdown element:

<multiselect
id=”multiselect_drop_down_agency_companies”
v-model=”drop_down_agency_companies_selected”
track-by=”id”
label=”name”
:multiple=”false”
:options=”agency_companies”
:searchable=”true”
:loading=”drop_down_agency_companies_selectize_isLoading”
:placeholder=”drop_down_agency_companies_selectize_placeholder”
@select=”drop_down_agency_companies_at_select”
:preselectFirst=”true”
:allowEmpty=”false”
deselectLabel=”Selected”
:clearOnSelect=”true”
@search-change=”onSearchAgencyCompanies”>

<span slot=”noResult”>custom no result agency companies</span>
<span slot=”noOptions”>custom no options agency companies</span>

</multiselect>

This is the JS code:

/*
* reseller companies settings
* start
*/

drop_down_reseller_companies_selectize_no_result : ‘no result’,
drop_down_reseller_companies_selectize_isLoading: false,
drop_down_reseller_companies_selectize_placeholder : ‘type the name of a reseller company …’,
drop_down_reseller_companies_selected_default : { id: null, name : ‘type the name of a reseller company …’ },
drop_down_reseller_companies_selected : { id: null, name : ‘type the name of a reseller company …’ },

reseller_companies : [],

/*
* reseller companies
* stop
*/

/*
* agency companies settings
* start
*/

drop_down_agency_companies_selectize_no_result : ‘no result’,
drop_down_agency_companies_selectize_isLoading: false,
drop_down_agency_companies_selectize_placeholder : ‘type the name of a agency company …’,
drop_down_agency_companies_selected_default : { id: null, name : ‘type the name of a agency company …’ },
drop_down_agency_companies_selected : { id: null, name : ‘type the name of a agency company …’ },

agency_companies : [],

/*
* agency companies
* stop
*/

These are the methods :

This method gets trggered when selecting a reseller company:

drop_down_reseller_companies_at_select({id, name}){

consoleService.log(‘drop_down_reseller_companies_at_select’, true);

consoleService.log(‘id’, true);
consoleService.log(id, true);

consoleService.log(‘name’, true);
consoleService.log(name, true);

this.m_record.reseller_id = id;
// optional setting
// this.drop_down_reseller_companies_selectize_placeholder = name;
this.drop_down_reseller_companies_selected = { id: id, name : name };

this.campaigns = [];
//this.m_record.campaign_id = this.m_record_default.campaign_id;
this.m_record.campaign_id = null;

this.drop_down_client_companies_selected = this.drop_down_client_companies_selected_default;
this.client_companies = [];
//this.m_record.client_id = this.m_record_default.client_id;
this.m_record.client_id = null;

this.drop_down_agency_companies_selected = this.drop_down_agency_companies_selected_default;
this.agency_companies = [];
//this.m_record.agency_id = this.m_record_default.agency_id;
this.m_record.agency_id = null;

//consoleService.log(‘m record’, true);
//consoleService.log(this.m_record, true);

this.dynamic_drop_downs_class();

this.populateDropDownAgencyCompanies(id);

},

This method gets triggered when selecting a agency company:

drop_down_agency_companies_at_select({id, name}){

consoleService.log(‘drop_down_agency_companies_at_select’, true);

consoleService.log(‘id’, true);
consoleService.log(id, true);

consoleService.log(‘name’, true);
consoleService.log(name, true);

this.m_record.agency_id = id;
// optional setting
// this.agency_company_selectize_placeholder = name;
this.drop_down_agency_companies_selected = { id: id, name : name };

this.campaigns = [];
//this.m_record.campaign_id = this.m_record_default.campaign_id;
this.m_record.campaign_id = null;

this.drop_down_client_companies_selected = this.drop_down_client_companies_selected_default;
this.client_companies = [];
//this.m_record.client_id = this.m_record_default.client_id;
this.m_record.client_id = null;

//consoleService.log(‘m record’, true);
//consoleService.log(this.m_record, true);

//this.dynamic_drop_downs_class();

//this.populateDropDownClientCompanies(id);

},

This method should get triggered only when searching within the reseller dropdown element:

onSearchResellerCompanies(search, elId){

consoleService.log(‘onSearchResellerCompanies’, true);

consoleService.log(‘element Id’, true);
consoleService.log(elId, true);

consoleService.log(‘search’, true);
consoleService.log(search, true);

if(this.selectize_timestamp){
clearTimeout(this.selectize_timestamp);
}

if(
search.length >= 2 &&
search != this.drop_down_reseller_companies_selected.name
){

consoleService.log(‘onSearchResellerCompanies q >= 2’, true);

this.selectize_timestamp = setTimeout(() => {

this.reseller_companies_selectize_isLoading = true;

//axios start
axios.post(
apiService.API_URL + ‘/resellerCompaniesListSelectize’,
{
token : this.$store.getters.token,
q : search,
}
).then(
(response) => {

this.reseller_companies_selectize_isLoading = false;

consoleService.log(‘administrator form selectize search axios /onSearchResellerCompanies response success’, true);
consoleService.log(response.data, true);

this.reseller_companies = response.data.data;

}
).catch(
(error) => {

// nothing to do here

//consoleService.log(‘administrator form selectize search axios /onSearchResellerCompanies response error’, true);
//consoleService.log(error, true);

}
);
//axios stop

}, 500);

}else{

consoleService.log(‘onSearchResellerCompanies NO’, true);

}

},

This method shoud get triggered only when searching within the agency dropdown element:

onSearchAgencyCompanies(search, elId){

consoleService.log(‘element Id’, true);
consoleService.log(elId, true);

consoleService.log(‘onSearchAgencyCompanies’, true);

consoleService.log(‘search’, true);
consoleService.log(search, true);

if(this.selectize_timestamp){
clearTimeout(this.selectize_timestamp);
}

if(
search.length >= 2 &&
search != this.drop_down_agency_companies_selected.name
){

this.selectize_timestamp = setTimeout(() => {

this.agency_companies_selectize_isLoading = true;

//axios start
axios.post(
apiService.API_URL + ‘/agencyCompaniesListSelectize’,
{
token : this.$store.getters.token,
q : search,
}
).then(
(response) => {

this.agency_companies_selectize_isLoading = false;

consoleService.log(‘administrator form selectize search axios /onSearchAgencyCompanies response success’, true);
consoleService.log(response.data, true);

this.agency_companies = response.data.data;

}
).catch(
(error) => {

// nothing to do here

//consoleService.log(‘administrator form selectize search axios /onSearchAgencyCompanies response error’, true);
//consoleService.log(error, true);

}
);
//axios stop

}, 500);

}

},

Solution :

there is been trying to find a solution to this problem for days now.

After trying all kind of tricks and running all kind of tests, I found out that this form component was working fine on the create scenario and failing on the edit scenario.

A couple of hours ago, I found the BUG.

Make sure that you do not use v-if directives !

Always try and use v-show directives, in order to avoid strange behaviour.

<!– row [ dropdowns companies ] / start –>
<div class=”row”>

<!– dropdown resellers companies / start –>
<div v-show=”show_drop_down(‘const_access_level_reseller’)”
v-bind:class=”drop_down_number_of_columns”>

<div class=”form-group”>

<label>{ translations.reseller_optional | filter_translation_default(‘reseller_optional’) }</label>

<multiselect
id=”multiselect_drop_down_reseller_companies”
name=”multiselect_drop_down_reseller_companies”
autocomplete=”off”
:autocomplete=”off”
v-model=”drop_down_reseller_companies_selected”
track-by=”id”
label=”name”
:multiple=”false”
:options=”reseller_companies”
:searchable=”true”
:loading=”drop_down_reseller_companies_selectize_isLoading”
:placeholder=”drop_down_reseller_companies_selectize_placeholder”
@select=”drop_down_reseller_companies_at_select”
:preselectFirst=”true”
:allowEmpty=”false”
deselectLabel=”Selected”
:clearOnSelect=”true”
:clear-on-select=”true”
@search-change=”searchForResellerCompany”>

<span slot=”noResult”>custom no result reseller companies</span>
<span slot=”noOptions”>custom no options reseller companies</span>

</multiselect>

<span class=”text-danger”
v-show=”validationErrorsFormAdministrator.reseller_id”
v-text=”validationErrorsFormAdministrator.reseller_id”></span>

</div>

</div>
<!– dropdown resellers companies / stop –>

when looking at the official vue.js docs for animation, and when confused how to implement the following example from vues website

Vue.transition(‘fade’, {
css: false,
enter: function (el, done) {
// element is already inserted into the DOM
// call done when animation finishes.
$(el)
.css(‘opacity’, 0)
.animate({ opacity: 1 }, 1000, done)
},
enterCancelled: function (el) {
$(el).stop()
},
leave: function (el, done) {
// same as enter
$(el).animate({ opacity: 0 }, 1000, done)
},
leaveCancelled: function (el) {
$(el).stop()
}
})

into my vue.js root

var v_root = new Vue({
delimiters: [ ‘[[‘, ‘]]‘ ],
el: ‘#vue-job’,
data: {
job_s: []
},
created() {
url=”http://{ api_endpoint }”
fetch(url)
.then(response => response.json())
.then(body => {
}

Do I need to add this to my components?

Solution :

Working Example:

<transition
v-bind:css=”false”
v-on:before-enter=”beforeEnter”
v-on:enter=”enter”
v-on:leave=”leave”
\>
<p v-if=”show”>hello</p>
</transition>

https://jsfiddle.net/posva/khd2ur97/

Another example:
https://jsfiddle.net/ayo7fL4t/

I had an issue: npm run watch was stuck after 10%, so I deleted node_modules directory and package-lock.json
But I guess I installed modules with npm install without using –save-dev, and after having reinstalled several of them I still get a warning and can’t identify which package is missing here…

WARNING in ./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css& (./node_modules/css-loader/dist/cjs.js??ref–6-1!./node_modules/laravel-mix/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref–6-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css&)
Module Warning (from ./node_modules/css-loader/dist/cjs.js):
Warning

(476:2) Unable to find uri in ‘background:url() no-repeat top left black’
@ ./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css& (./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js??ref–6-1!./node_modules/laravel-mix/node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref–6-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css&) 2:14-388
@ ./resources/js/components/common/ContenuComponent.vue?vue&type=style&index=0&id=1a3ffd6c&scoped=true&lang=css&
@ ./resources/js/components/common/ContenuComponent.vue
@ ./resources/js/app.js
@ multi ./resources/js/app.js ./resources/sass/app.scss

I did:

npm install postcss-loader –save-dev
npm install style-loader –save-dev
npm install css-loader –save-dev
npm install file-loader –save-dev
npm install vue-loader –save-dev

Is there any way to identify what when missing?
Thanks a lot!

Solution :

when you remove package-lock.json, you remove references about which specific versions of each package were installed before. My guess is that there was an issue published within the css-loader module, which seems to be a dependency of a dependency of Laravel.

The easiest fix would be bringing back package-lock.json, removing node_modules again and reinstalling with npm install.

Solution 2:

There are few things you can try based on the information you have provided. You can try npm cache clean or npm cache clean –f (this is a force, which will ask you if you know what you are doing, you can proceed with the force). Once the cache has been cleaned, you can try running npm install again. Also check the version of NodeJS and make sure that whatever packages you’re using is also supporting the version. Node -V and check and make sure that css loader supports the version of node.

there is a Home.vue.js component which outputs a users list from user.json file. I created a router to link each user to userProfile.vue.js component where we will see the user details depending on the user id.

there is tried with the code below, but the userProfile.vue.js outputs all the user and I just want to output the user id which correspond with the router. I know the router works cause I get the right id in the link tab.

This is my user.json file:

[
{
“id”: “1”,
“jobTitle”: “Lead Web Developer”,
“fullName”: “John Doe”,
“email”: “john_doe@hotmail.com“,
“phoneNumber”: “514-149-4934”,
“address”: “4230, Amber Street.”
},
{
“id”: “2”,
“jobTitle”: “FrontEnd Web Developer”,
“fullName”: “Jane Doe”,
“email”: “jane_doe@gmail.com“,
“phoneNumber”: “514-365-9524”,
“address”: “5609, Diamond Street.”
},
{
“id”: “3”,
“jobTitle”: “BackEnd Developer”,
“fullName”: “Michael Summerland”,
“email”: “michael_summerland@gmail.com“,
“phoneNumber”: “514-892-2436”,
“address”: “5609, Ruby Street”
},
{
“id”: “4”,
“jobTitle”: “UX Designer”,
“fullName”: “Johnny UnderWood”,
“email”: “johnny_underwood@gmail.com“,
“phoneNumber”: “514-422-3059”,
“address”: “5609, Esmerald Street”
}
]

This is my router.js file

import vue.js from ‘vue’
import Router from ‘vue-router’
// imports components to router
import Home from ‘@/components/Home.vue’
// imports userProfile component
import UserProfile from ‘@/components/UserProfile.vue’

Vue.use(Router)

export default new Router({
mode: ‘history’,
base: process.env.BASE_URL,
routes: [
{
path: ‘/‘,
name: ‘Home’,
component: Home
},
// route to user profile matching id
{
path: ‘/user/:id’,
name: ‘UserProfile’,
component: UserProfile
}
]
})

This is my UserProfile.vue.js component

<template>
<div class=”user-profile”>
<b-navbar toggleable=”lg” type=”dark” variant=”info”>
<div class=”container”>
<b-navbar-brand class=”text-uppercase mr-auto”>User Profile</b-navbar-brand>
<!– Route link to go back to user list –>
<router-link :to=”{ path: ‘/‘}”><b-button variant=”success”>Go back</b-button></router-link>
</div>
</b-navbar>

<!– User details –>
<div class=”user-details container mt-4”>
<div v-for=”(user, id) in users” :key=”id”>
<div class=”user-title”><strong>User Title: </strong>{ user.jobTitle }</div>
<p class=””><strong>Street:</strong> { user.fullName }</p>
<p class=””><strong>Zip Code:</strong> { user.email }</p>
<p class=””><strong>City:</strong> { user.phoneNumber }</p>
<p class=””><strong>State:</strong> { user.address }</p>
</div>
</div>
</div>
</template>

<script>
// imports user.json file
import users from ‘./../assets/users.json’

export default {
name: ‘UserProfile’,
data(){
return {
users: users,
}
},
}
</script>
<style scoped lang=”scss”>

</style>

You can also check my github branch on this link

Any help will be really appreciated!

Solution :

you have updated code as below:

<!– User details –>
<div class=”user-details container mt-4”>
<div v-for=”(user, id) in users” :key=”id”>

<div class=”user-title”><strong>User Title: </strong>{ user.jobTitle }</div>
<p class=””><strong>Street:</strong> { user.fullName }</p>
<p class=””><strong>Zip Code:</strong> { user.email }</p>
<p class=””><strong>City:</strong> { user.phoneNumber }</p>
<p class=””><strong>State:</strong> { user.address }</p>
<router-link :to=”{ name: ‘UserProfile’, params: { id: user.id }”>User</router-link>
</div>

</div>

there is a number of buttons that are generated in vue.js using v-if dynamically. to layout the buttons evenly on the bottom of the page (left and right space areas are the same).

I’m using the mdui button style, it appears to be fixed width and height. So there is to layout on one row ( for example if there are less than three or four buttons or exceed the mobile page’s width) or two rows (if there are more buttons)

there is tried <div class=”bottomBtn” style=”display:flex; flex-wrap:wrap;”> It’s not working… I’m very confused about div boxes. How to achieve this?

I expect the left and right spaces are even. But the result is shown in the picture, all the buttons are left aligned…

<div class=”bottomBtn”>
<button class=”mdui-btn mdui-btn-raised”>Save</button>
<button class=”mdui-btn mdui-btn-raised” v-if=”pullDisplay”>PullBack</button>
<button class=”mdui-btn mdui-btn-raised” v-if=”cancelDisplay”>Cancel</button>
<button class=”mdui-btn mdui-btn-raised” v-if=”reviseDisplay”>Revise</button>
<button class=”mdui-btn mdui-btn-raised” v-if=”sendDisplay”>SendBack</button>
<button class=”mdui-btn mdui-btn-raised” v-if=”approvalDisplay”>Approval</button>
</div>

Solution :

To use flexbox to achieve this, as it seems you are trying, you need to set the justify-content property to space-between.

i.e

<div class=”bottomBtn” style=”display:flex; flex-wrap:wrap; justify-content: space-between;”>

I would also recommend collecting these styles into a class that can be added into a div.

space-around and space-evenly can also be used for a similar effect, so you might want to try each and see which give you the result you are most happy with.

I highly recommend this guide for figuring out how to get flexbox to do exactly what you want in the future.

Final recommendation: If you want there always to be a gap between the buttons (so that they wrap before they are fully touching) just add a left and right margin to the buttons and flex will take care of the rest.

when building a small blog that fetches data from an API. The API returns an array of objects with each object include the post and sometimes another object containing comments and the ID of that particular comment. How can I collect the used IDs so when I add another comment it is unique and not one already used?

Example of the data that is fetched:

{
“articles”: [
{
“id”: “111”,
“title”: “How do like them apples?”,
“text”: “Lorem ipsum elit ante aliquam blandit nulla gravida, elementum sollicitudin ipsum litora rhoncus urna, nec in pulvinar quam libero dictumst. Duis hac augue auctor sed proin senectus ante purus est, condimentum mattis nostra non porttitor sit nibh ornare etiam quisque eros ultricies eget taciti inceptos etiam ornare feugiat pretium. Varius ullamcorper imperdiet tortor quisque odio ullamcorper pulvinar, tortor semper primis consequat libero erat, adipiscing mi donec semper duis magna.”,
“author”: “simon”,
“category”: “mobile”,
“comments”: [
{
“id”: “1”,
“author”: “shaun”,
“text”: “Lorem ipsum varius senectus nostra lectus nunc sollicitudin.”
},
{
“id”: “2”,
“author”: “william”,
“text”: “aliquam blandit nulla gravida”
}
]
},
{
“id”: “112”,
“title”: “The new normal….”,
“text”: “Lorem ipsum molestie inceptos ullamcorper vel faucibus curae amet, lacinia et euismod tempus fringilla blandit litora risus in, accumsan mollis netus leo posuere adipiscing aliquam.Nibh nunc volutpat integer class mollis tellus cubilia, quisque elit proin sagittis netus cubilia, per aenean neque est dictum phasellus sapien eget fringilla ligula hac nostra platea.”,
“author”: “william”,
“category”: “mobile”,
“comments”: [
{
“id”: “3”,
“author”: “shaun”,
“text”: “lacinia et euismod tempus fringilla blandit”
}
]
}

Solution :

You should have an array of ‘ids’ in the vue.js data, like this:

var vm = new Vue({
…
data:{
ids : []
}
})

and after getting the objects from the API you should check if it already exists:

var vm = new Vue({
…
methods:{
getPosts: function() { … },
insertId: function(id){
if(this.ids.includs(id)){
//handle the duplicate id
}
}
})