link0 link1 link2 link3 link4 link5 link6 link7 link8 link9 link10 link11 link12 link13 link14 link15 link16 link17 link18 link19 link20 link21 link22 link23 link24 link25 link26 link27 link28 link29 link30 link31 link32 link33 link34 link35 link36 link37 link38 link39 link40 link41 link42 link43 link44 link45 link46 link47 link48 link49 link50 link51 link52 link53 link54 link55 link56 link57 link58 link59 link60 link61 link62 link63 link64 link65 link66 link67 link68 link69 link70 link71 link72 link73 link74 link75 link76 link77 link78 link79 link80 link81 link82 link83 link84 link85 link86 link87 link88 link89 link90 link91 link92 link93 link94 link95 link96 link97 link98 link99 link100 link101 link102 link103 link104 link105 link106 link107 link108 link109 link110 link111 link112 link113 link114 link115 link116 link117 link118 link119 link120 link121 link122 link123 link124 link125 link126 link127 link128 link129 link130 link131 link132 link133 link134 link135 link136

[Vue.js] How do I save some API data from a v-for loop to my mongodb? Subscribe to RSS

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);

}

[Vue.js] style binding by @click - vue.js Subscribe to RSS

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

[Vue.js] Vue Apollo How can I query GraphQL using an object as Input argument? Subscribe to RSS

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)
}

[Vue.js] One array still refers to a second array after .push()-method (JS/vue.js) Subscribe to RSS

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)
})
)

}
}

[Vue.js] Vue multiselect element triggers event on wrong element Subscribe to RSS

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 –>

[Vue.js] How to add a basic animation to a component in vue js Subscribe to RSS

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/

[Vue.js] Missing packages after cleaning node_modules Subscribe to RSS

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.

[Vue.js] How to check an specific user detail component using the user ID with vue-router from json file? Subscribe to RSS

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>

[Vue.js] How to use css to layout a number of dynamically appeared buttons evenly? Subscribe to RSS

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.

[Vue.js] How can I create a new id for every new comment while making sure it doesn't conflict with other comments fetched from the Api using Vue.js? Subscribe to RSS

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
}
}
})