there is a company table with email ID array as one of the attributes. I need to push new emails into the array only if it doesn’t exist in the array.

As example, there is an array of [“one”, “two”] and if I pass [“one”, “three”], the updated attribute value has to be [“one”, “two”, “three”] and not [“one”, “two”, “one”, “three”].

Now, I’m thinking of querying the array first and then check for duplicacy, update the array and pass the updated array back to the database.

Is there any easier way to execute this, as I’ll have to query multiple items and update all those items’ email attribute and then pass those back to the database.

I’m using vue.js and dynamodb.

Solution :

DynamoDB has a special “set of strings” attribute type, with an operation of adding a value to it without duplications.
Make sure you are not using a “list”, where such duplicity does happen.

I’m building a web component using the following command :

vue-cli-service build –target wc –name my-element ‘src/components/mycomponent.vue’

I would like to use Vuetify inside of this component. How do I add it to mycomponent.vue.js so that it is scoped inside the component’s shadow root?

This component will be dynamically loaded into apps built with other frameworks/styles. the web component to be able to use, for example, v-btn, v-layout, etc. within it.

Thank you,
Donnie

Solution :

From v1.3, you can import individual components, A La Carte…

<template>
<!– whatever –>
</template>

<script>
import { VBtn, VLayout } from ‘vuetify/lib’

export default {
name: ‘MyElement’,
components {
VBtn,
VLayout
},
// etc
}
</script>

See https://vuetifyjs.com/en/framework/a-la-carte#importing-components

there is a Map component which initializes leaflet on the DOM like so:

Map.vue

<template>
<div ref=”map”/>
<template>
<script>
import * as L from ‘leaflet’;
import mapEventBus from ‘../event-buses/map.vue’;

export default {
mounted(){
const map = L.map(this.$refs.map);
mapEventBus.$on(‘add-marker’,(newMarker) => {
newMarker.addTo(map);
});
}
}
</script>

And then there is another component which needs to add a marker that is built on the components creation.

OtherComponent.vue

<template>
<div/>
</template>
<script>
import mapEventBus from ‘../event-buses/map.vue’;
export default {
created(){
mapEventBus.$emit(‘add-marker’,L.marker([51.5, -0.09]));
}
}
</script>

Because the map is initialized after the OtherComponent has already tried emitting to the event bus, the event is never fired. What would be the best way to “await” for the map to be initialized and then add the marker to the map. I though about having a “cache” of pending markers that is added on the map creation but that seems clunky.

Example:

https://codesandbox.io/s/2ov71xnz3r

Solution :

OK, so you’ve got a little chicken and egg problem there. You have an element you need to update via refs (some way to hack data into a 3rd party plugin), but you get the data BEFORE you mount the HTML.

What you need to do is separate out the immediate catch into a data variable, then on mount, check to see if it exists and if so update the HTML element.

I’m not answering the question above, because the problem is simplified in the codesandbox example you provided.

Here is the solution based on that:

https://codesandbox.io/s/3rnyp31n4p

<script>
import { EventBus } from ‘../eventBus.js’

export default {
data: () => ({
immediateMessage: null
}),
beforeCreate() {
EventBus.$on(“immediate-message”, message => {
this.immediateMessage = message;
});
},
mounted() {
if (this.immediateMessage) {
this.$refs.immediateMessageEl.innerHTML += this.immediateMessage;
}
EventBus.$on(“delayed-message”, message => {
this.$refs.delayedMessageEl.innerHTML += message;
});
}
};
</script>

Note, the beforeCreate() binds to the event and sets a variable, then we use that variable once the DOM is mounted.

Check out lifecycle hooks page for more info https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram

This is definitely not the most elegant solution, but will definitely get you going.

I’m having an issue with setting a computed property (which is an array). there is the following computed property in my vue.js component:

posts: {
get () {
if ( this.type == ‘businesses’ || this.type == ‘business’ ) {
return this.$store.getters.getAllBusinesses.map(_business => {
return _business
})
} else if ( this.type == ‘shops’ || this.type == ‘shop’ ) {
return this.$store.getters.getAllShops.map(_shop => {
return _shop
})
} else if ( this.type == ‘events’ || this.type == ‘event’ ) {
return this.$store.getters.getAllEvents.map(_event => {
return _event
})
} else {
return this.$store.getters.getAllBusinesses.map(_business => {
return _business
})
}
},
set (posts) {
console.log(posts)
this.posts = posts // Doesn’t work - this causes a maximum call stack error, recursively setting itself obviously.
return posts // Doesn’t work either - this.posts doesn’t seem to be changing…
}
},

The console.log(posts) is exactly what - a filtered array of posts, see the below console log output.

My question is simply this: how do I go about updated the computed posts value?

If it is useful, when doing the following manipulation to the posts:

let filteredPosts = []

this.posts.filter(_post => {
_post.category.forEach(category => {
if ( this.categoryFilters.includes(category.slug) ) {
filteredPosts.push(_post)
}
})
})

let uniqueFilteredPosts = […new Set(filteredPosts)];

this.posts = uniqueFilteredPosts

This is purely to filter them. What when console.logging is absolutely correct to what I want. So this might be a red herring.

Any pro-vue.js tips would be greatly appreciated!

Solution :

If you want to use a computed setter, you normally assign to whatever values underlie the computed’s get function. See the example at the link.

In the case, you examine this.type and return something from the store based on it. The setter should probably examine this.type and set something in the store based on it.

when discovering php, laravel, vuejs at the same time and I guess there are some things I didn’t get well yet ;)

I made a new component “tableau” which is a basic table and would like to use it at many places in my app, where I would just specify its title, columns and data.
FootballerController is the place where I get all my data.

Here is what is working now:

app.js

const tableau = new Vue({
components:{tableau:Tableau
},
data: function() {
return {
title: “the best footballers”,
searchQuery: ‘’,
gridColumns: [‘footballer’, ‘cote’, ‘nationalite’],
gridData: [
{ footballer: ‘Remond’, cote: 951, nationalite:’USA’ },
{ footballer: ‘Marcel’, cote: 935, nationalite:’ESP’ },
{ footballer: ‘Stian’, cote: 923, nationalite:’NOR’ },
{ footballer: ‘Martin’, cote: 923, nationalite:’USA’ },
{ footballer: ‘Pierre’, cote: 918, nationalite:’ESP’ },
]
}
}
}).$mount(‘#tableau’);

footballer.blade.php

<tableau
v-bind:titre=”title”
:rows=”gridData”
:columns=”gridColumns “
:filter-key=”searchQuery” >
</tableau>

TableauComponent

<template>
<div >
<h1 >{titre}</h1>
<table >
<thead>
<tr>
<th v-for=”key in columns”
{ key | capitalize }
</th>
</tr>
</thead>
<tbody>
<tr v-for=”entry in rows”>
<td v-for=”key in columns”>
{entry[key]}
</td>
</tr>
</tbody>
</table>
</div>
</template>

<script>
export default {
name:’tableau’,
props: {
rows: Array,
columns: Array,
titre: String
}
}
</script>

This works.

Then, here is what I would like: being able to put my values from the controller into footballer.blade.php, which is using TableauComponent.vue

FootballerController

public function footballer($id){
//process to get all this data in DB ($footballer, $gridData, $gridColumns, $title)
$footballer= (Footballer::select(SOME REQUEST)->where(‘id’, ‘=’, $id)->get())[0];

return view(‘footballers/footballer’, [‘footballer’ => $footballer,
‘gridData’ => $gridData,
‘gridColumns’ => $gridColumns,
‘title’ => $title] );
}

And in footballer.blade.php

<tableau
v-bind:titre=”{ $title }”
:rows=”{ $gridData }”
:columns=”{ $gridColumns }” >
</tableau>

Then in app.js I wouldn’t need data anymore

const tableau = new Vue({
components:{tableau:Tableau
}
}).$mount(‘#tableau’);

But this doesn’t work and tells me “Property or method is not defined on the instance but referenced during render”

I don’t manage at all and am worndering is there is the good way of doing: Should I not get my data in FootballerController? If not, where can I get it then?

Thanks a lot in advance.

Solution :

the are using ‘:’ symbol before the attributes in the blade, which means ‘v-bind’ as the doc says : VueJS Shorthands.
So first, for assigning a String to a props, you don’t need ‘:’ before ‘titre’.

Then, to solve the problem you could try to add a default value to the props, for example :

props: {
rows: {
default: []
},
columns: {
default: []
},
titre: {
default: ‘’
}
}

I didn’t try but I think it should works.

Solution 2:

When you use { value } in both Blade & javascript framework at the same time. You need to use @{ value } to avoid collision between Blade & Vue.

try

<tableau
v-bind:titre=”@{ $title }”
:rows=”@{ $gridData }”
:columns=”@{ $gridColumns }” >
</tableau>

Besides that, when you use :rows=”value”, the value must be javascript syntax, otherwise when rows=”value”, the value would be treated as string.

You might need to use json_encode to format the data from the Laravel, or use @json if you’re using Laravel 5.5^.

Just run into this error I hadn’t encountered before: “You are binding v-model directly to a v-for iteration alias. This will not be able to modify the v-for source array because writing to the alias is like modifying a function local variable. Consider using an array of objects and use v-model on an object property instead.” when a little puzzled, as I don’t appear to be doing anythong wrong. The only difference from other v-for loops I’ve used before is that this one is a little simpler, in that it’s simply looping through an array of strings, rather than objects:

<tr v-for=”(run, index) in this.settings.runs”>

<td>
<text-field :name=”‘run’+index” v-model=”run”/>
</td>

<td>
<button @click.prevent=”removeRun(index)”>X</button>
</td>

</tr>

The error message would seem to suggest that I need to actually make things a little more complicated, and use objects instead of simple strings, which somehow doesn’t seem right to me. Am I missing something?

Solution :

Since you’re using v-model, you expect to be able to update the run value from the input field (text-field is a component based on text input field, I assume).

The message is telling you that you can’t directly modify a v-for alias (which run is). Instead you can use index to refer to the desired element. You would similarly use index in removeRun.

new Vue({
el: ‘#app’,
data: {
settings: {
runs: [1, 2, 3]
}
},
methods: {
removeRun: function(i) {
console.log(“Remove”, i);
this.settings.runs.splice(i,1);
}
}
});
<script src=”//cdnjs.cloudflare.com/ajax/libs/vue/2.5.18/vue.js”></script>
<table id=”app”>
<tr v-for=”(run, index) in settings.runs”>
<td>
<input type=”text” :name=”‘run’+index” v-model=”settings.runs[index]“ />
</td>
<td>
<button @click.prevent=”removeRun(index)”>X</button>
</td>
<td>{run}</td>
</tr>
</table>

Is it possible to dispatch an action between namespaced modules?

E.g. there is vuex modules “gameboard” and “notification”. Each are namespaced. I would like to dispatch an action from the gameboard to the notification module.

I thought I could use the module name in the dispatch action name like this:

// store/modules/gameboard.js
const actions = {
myaction ({dispatch}) {
…
dispatch(‘notification/triggerSelfDismissingNotifcation’, {…})
}
}

// store/modules/notification.js
const actions = {
triggerSelfDismissingNotification (context, payload) {
…
}
}

But when I try to do this I get errors that make me thing vuex is trying to dispatch an action within my gameboard module:

[vuex] unknown local action type: notification/triggerSelfDismissingNotification, global type: gameboard/notification/triggerSelfDismissingNotification

Is there a way of dispatching from vuex module to module or do I need to create some kind of a bridge in the root vuex instance?

Solution :

You just need to specify that you’re dispatching from the root context:

// from the gameboard.js vuex module
dispatch(‘notification/triggerSelfDismissingNotifcation’, {…}, {root:true})

Now when the dispatch reaches the root it will have the correct namespace path to the notifications module (relative to the root instance).

This is assuming you’re setting namespaced: true on the vuex store module.

there is a website that uses a filtering system built in Vue.js, it filters properties with “states”, “cities” and “type”, the code looks like this, it works for states and types but not for cities which come from an Object rather than an Array. when not sure how to acces the value inside of the Object.

<div class=”grid-x grid-margin-x”>
<div class=”cell medium-auto”>
<label for=”property-state”>STATE</label>
<select name=”property-state” @change=”search()” id=”property-state”>
<option value=””>Select</option>
<option v-for=”val in terms[‘property-state’]“ :value=”val.id”>{ val.name }</option>
</select>
</div>
<div class=”cell medium-auto”>
<label for=”city”>CITY</label>
<select name=”city” @change=”search()” id=”city”>
<option value=””>Select</option>
<option v-for=”val in terms [‘location’]“ :value=”val.id”>{ val.city }</option>
</select>
</div>
<div class=”cell medium-auto” @change=”search()”>
<label for=”property-type”>PROPERTY TYPE</label>
<select name=”property-type” id=”property-type”>
<option value=””>All types</option>
<option v-for=”val in terms[‘property-type’]“ :value=”val.id”>{ val.name }</option>
</select>
</div>
</div>

when aware that I’m trying to access “location” as if it were an Array but not sure how to do it as it is an Object as seen in the image attached.

The data when trying to access is structured as follows:

location (Object)

|

city: “cityName”

Solution :

In Vue, v-for treats an object and an array in the same way. An array has the same type of values, but an object has a structure that could be different. Use computed properties to save the city name into an array.

https://vuejs.org/v2/guide/list.html#v-for-with-an-Object

there is a wrapper component (waypoint) which collects child elements. On the child elements to set functions which should be executed from the wrapper component, how can I do that?

//page

//template
<v-waypoint>
<div
:data-wp-cb=”animateIn”
// :data-wp-cb=”animateIn.bind(this)”
class=”js-wp”

//methods
animateIn() {
// do something
}

//waypoint component

update(el) {
const cb = el.dataset.wpCb
cb() // cb is not a function
}

How can I make this work?

Solution :

You should solve it emitting the event from child to the parent.

Waypoint component:

update(param) {
this.$emit(‘update-from-child’, param);
}

Page component:

<v-waypoint @update-from-child=”localMethod”>
<div
:data-wp-cb=”animateIn”
// :data-wp-cb=”animateIn.bind(this)”
class=”js-wp”

This is how vue.js deals with child -> parent comunication. For more info, check the docs.

Sorry for my bad English. I’m writing an application in ASP.NET Core using Vue.JS for client-side. For authenticate user I’m using JWT and ASP.NET Identity. there is a method for change the password. But I can’t understand: How to invalide token after password change? that the user authenticated in another browser will logout after that. Is there a man who haved a problem like this?

Solution :

You normally don’t invalidate JWT’s because they are meant to be short-lived access tokens and therefore after the password change, request for new token will prompt the user to reenter credentials.

If you do absolutely need to invalidate the JWT immediatelly after password change - you need to look into Introspection where the backend api essentially has a backchannel to the token issuer and it can then re-validate token every request. This way if you invalidate token at the issuer side - it will reflect on the api side immediately.