Consider the following scenario.

there is two namespaced modules: moduleA and moduleB. They both follow a similar pattern:

export default {
namespaced: true,
state: defaultState(),
actions: {
// …
},
mutations: {
[SET_DATA] (state, data) {
state.data = data
}
}
}

I then want to be able to reset all of my modules with one action. I commit a mutation “APP_RESET” in the root namespace:

commit(APP_RESET, null, { root: true})

At this point, I would have added something like this to each of my modules:

[APP_RESET] (state) {
Object.assign(state, defaultState())
}

However, the mutations being handled are now:

moduleA: moduleA/SET_DATA, moduleA/APP_RESET

moduleB: moduleB/SET_DATA, moduleB/APP_RESET

Is it possible to set up my namespace modules, such that they can handle the following?

moduleA: moduleA/SET_DATA, APP_RESET

moduleB: moduleB/SET_DATA, APP_RESET

Solution :

I’ve found my answer. I didn’t think to set up actions on the root namespace. E.g.

From non-namespaced context:

dispatch(APP_RESET)

In each of my modules:

[APP_RESET]: {
root: true,
handler ({commit}) {
commit(RESET_MODULE_A)
}
}

From namespaced context:

dispatch(APP_RESET)

In each of my modules:

[‘namespaceOfDispatcherModule/‘ + APP_RESET]: {
root: true,
handler ({commit}) {
commit(RESET_MODULE_A)
}
}

there is an array of posts and each post has a user. I also have a select field where I can change the post’s user. However only the user’s id updates on the page and not the username itself. How could there is both of them update and reflect the change?

data() {
return {
posts: [
{
id: 1,
post_body: ‘hello world’,

user: {
id: 45,
username: ‘Johnny13’
}
},
{
id: 2,
post_body: ‘what is up?’,

user: {
id: 97,
username: ‘Billly75’
}
}
],

users: [
{id: 45, username: ‘Johnny13’},
{id: 97, username: ‘Billly75’}
]
}
}

html

<div v-for=”(post, index) in posts”>
The user for this post is:
{ post.user.id } <!– this changes –>
{ post.user.username } <!– this does not –>

Change the post’s user:
<select v-model=”post.user.id”>
<option v-for=”user in users” :value=”user.id”>{ user.username }</option>
</select>
</div>

Solution :

You could use the user object as v-model, and the same for options values. Like this:

<select v-model=”post.user”>
<option v-for=”user in users” :value=”user”>{ user.username }</option>
</select>

Below is my code.

vue.js Code =>

new Vue({
el:’.validation’,
data:{
message:’tet’,
search_path:’’,
change_id:null,
}
});

Laravel blade file =>

<div class=’validation’>
@{message}
</div>
<div class=’validation’>
@{message}
</div>
<div class=’validation’>
@{message}
</div>
<div class=’validation’>
@{message}
</div>

Now at first div its working and i get the result correctly but other successive div’s i don’t get results.
So my question is how to use new vue.js at multiple places in laravel blade with same class thanks.

Solution :

You would have to wrap the classes in an ID like below:

<div id=”app”>
<div class=’validation’>
@{message}
</div>
<div class=’validation’>
@{message}
</div>
<div class=’validation’>
@{message}
</div>
<div class=’validation’>
@{message}
</div>
</div>

new Vue({
el:’#app’,
data:{
message:’tet’,
search_path:’’,
change_id:null,
}
});

If this isn’t what you’re trying to do this answer could help.

I’m pretty new on VueJs. there is a Practice component which contains a ExerciseMC component. The parent component makes a request and gets a question object (with a text property) from the back and passes it to the ExerciseMC component as a prop. The first time the component is rendered, the text is rendered as it should but the second time, it renders the new title plus the old title and so on… I can’t figure out where this “memory” comes from but it isn’t the result that I expected…

Here is my Practice component:

<template>
<div>
<h2>Practice</h2>
<div id=”activity”>
<span id=”init” v-if=”type === ‘init’”>
Click on the “Next step” button when ready
</span>
<span id=”mc” v-else-if=”type === ‘mc’”>
<exerciseMC :ex=”ex”/>
</span>
<span id=”sa” v-else-if=”type === ‘sa’”>

</span>
</span>
<hr/>
<button type=”button” id=”btnValidate” @click=”validate()”>Validate</button>
 
<button type=”button” id=”btnSkip” @click=”skip()”>Skip</button>
 
<button type=”button” id=”btnNextStep” @click=”nextstep()”>Next step</button>
</div>
</template>

<script>
import ExerciseMC from ‘../exercises_temps/ExerciseMC’
import axios from ‘axios’

export default {
mounted(){
console.log(“Practicing”);
MathJax.Hub.Queue([“Typeset”,MathJax.Hub, “activity”]);
},
components: {
exerciseMC: ExerciseMC
},
data(){
return {
type: ‘init’,
ex: Object
}
},
methods: {
validate() {
console.log(“Validate”);
},
skip() {
console.log(“Skip”);
},
nextstep(){
console.log(“Next Step”);
const path = “http://localhost:8000/user/next-step";
axios
.get(path)
.then((response) => {
this.ex = {};
console.log(“Response : “);
console.log(response.data);
this.ex = response.data;
this.type = response.data.type;
})
.catch((error) => {
console.log(“Error”);
console.log(error);
});

}
}
}
</script>

And this is my ExerciseMC component:

<template>
<span id=”exercise”>
<p id=”text”>{ex.text}</p>
</span>
</template>

<script>
export default{
props: {
ex: Object,
},
mounted(){
MathJax.Hub.Queue([“Typeset”, MathJax.Hub, “exercise”])
},
beforeUpdate(){

},
updated(){
console.log(this.ex);
MathJax.Hub.Queue([“Typeset”, MathJax.Hub, “exercise”])
},
}
</script>

Useful information :
- I’m using MathJax to render math formulas in the text
- I already checked out the response from axios and the ex prop in the ExerciseMC component : everything is okay (the text changes every time and contains the text for each exercise)

I’m probably missing something about the Vuejs reactivity but I still can’t figure it out after some researches

Solution :

Editing since my previous suggestions did not work.

Try using a key on the component

<exerciseMC :key=”ex.text” :ex=”ex”/>

when prototyping a little SPA with Laravel and Vue.js and I was wondering if anyone had any ideas how I could quickly mock the data without having to create the model, migration and sample data etc?

I was thinking I could create the model and mock the data and return it in my controller but when not sure how I would mock the data… Would I create an instance of the model and then assign the data to it? If so how would I do it?

when not looking to mock the data in unit tests, when looking to mock the data within the controller.

Sorry if this is a basic question.

Solution :

Try the following in the function

$user = new User([‘name’ => ‘Taylor’, ‘lastName’ => ‘Otwell’])

return $user

this way you can return a new user model without having to save anything

when using vue-swal to display a dialog to the user. there is modified the usual swal in able to meet my desired functions and flow. While modifying, there is encountered error. there is 3 buttons in my swal and each button has specific functionality that need to be fired once a button was clicked. However, when I click the button, the handler function is not executed. I’ve tried to put a value on each button and used this as a variable to my condition. What did I miss?

Here is swal.

And my code

swal({
title: `Checkpoint!`,
html: `Some Text here.
<br> <br> <b>
Some text here?
</b>
<br> <br> <br>
<button type=”button” value=”a” class=”btn swl-cstm-btn-yes-sbmt-rqst”>Yes, Submit Request</button>
<button type=”button” value=”b” class=”btn swl-cstm-btn-no-jst-prceed”>No, Just proceed</button>
<button type=”button” value=”c” class=”btn swl-cstm-btn-cancel” >Cancel</button>`,
showCancelButton: false,
showConfirmButton: false,
}).then((result) => {
if(result.value === ‘a’)
{ console.log(‘Yes, Submit Request was Clicked!’) }
else if(resule.value === ‘b’)
{ console.log(‘No, Just proceed was Clicked!’) }
else
{ console.log(‘Cancel was Clicked!’) }
})

Solution :

Got an idea from @jom and now it’s working.

Here’s what I used based from the documentation of swal 2.

Swal Multiple Button

Here is my code:

swal({
title: `Checkpoint!`,
html: `Some Text here.
<br><br>
<b> Some text here? </b>
<br><br><br>
<button type=”button” class=”btn btn-yes swl-cstm-btn-yes-sbmt-rqst”>Yes, Submit Request</button>
<button type=”button” class=”btn btn-no swl-cstm-btn-no-jst-prceed”>No, Just proceed</button>
<button type=”button” class=”btn btn-cancel swl-cstm-btn-cancel” >Cancel</button>`,
showCancelButton: false,
showConfirmButton: false,
onBeforeOpen: () => {
const yes = document.querySelector(‘.btn-yes’)
const no = document.querySelector(‘.btn-no’)
const cancel = document.querySelector(‘.btn-cancel’)

yes.addEventListener(‘click’, () => {
console.log(‘Yes was Cliked.’)
})

no.addEventListener(‘click’, () => {
console.log(‘no was Cliked.’)
})

cancel.addEventListener(‘click’, () => {
console.log(‘cancel was Cliked.’)
})
}
})

Below is the set of external javascript functions that I’m calling from a vue.js instance

// debounce
function debounce(func, wait, immediate) {

let timeout;

return function() {
let context = this, args = arguments;
later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};

let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// — end debounce

// animate css
function animateCss(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add(‘animated’, animationName)

function handleAnimationEnd() {
node.classList.remove(‘animated’, animationName)
node.removeEventListener(‘animationend’, handleAnimationEnd)

if (typeof callback === ‘function’) callback()
}

node.addEventListener(‘animationend’, handleAnimationEnd);
}
// — end animate css

and my vue.js instance

new Vue({
el : ‘#app’,
template : ‘#search-tpl’,
methods : {
onKeyDown : debounce(function(){
animateCss(‘#searchboxui-wrapper’, ‘fadeOutDown’,function(){
document.querySelector(‘#searchboxui-wrapper’).style.display = ‘none’;
});
}
}
})

but it always throws me undefined, even if I declare the axios package or socketio package, it throws me undefined, any help, ideas please?

PS: I’m using vue.js CLI 3

Solution :

Create external js file, say externals.js, use import to import everything or specific functions from this file and use them in the vue.js code:

Content in externals.js:

// debounce
function debounce(func, wait, immediate) {

let timeout;

return function() {
let context = this, args = arguments;
later = function() {
timeout = null;
if (!immediate) func.apply(context, args);
};

let callNow = immediate && !timeout;
clearTimeout(timeout);
timeout = setTimeout(later, wait);
if (callNow) func.apply(context, args);
};
}
// — end debounce

// animate css
function animateCss(element, animationName, callback) {
const node = document.querySelector(element)
node.classList.add(‘animated’, animationName)

function handleAnimationEnd() {
node.classList.remove(‘animated’, animationName)
node.removeEventListener(‘animationend’, handleAnimationEnd)

if (typeof callback === ‘function’) callback()
}

node.addEventListener(‘animationend’, handleAnimationEnd);
}
// — end animate css
export {debounce, animateCss}

Content in VueJS:

import {debounce, animateCss} from ‘../../js/externals.js’

new Vue({
el : ‘#app’,
template : ‘#search-tpl’,
methods : {
onKeyDown(){
debounce(function(){
animateCss(‘#searchboxui-wrapper’, ‘fadeOutDown’,function(){
document.querySelector(‘#searchboxui-wrapper’).style.display = ‘none’;
});
});
}
}
})

My English is not very well.When I use ‘this.$validator.validate()’,I don’t want to validate all inputs in page.How can I validate some of them?

Solution :

Probably best to use scopes.

For each input you want to validate, add the attribute data-vv-scope=”group1” then you can do this.$validator.validate(‘group1.*‘).

If the fields are all in the same form, you can just apply the scope to that form and it will still work.

when trying to fix the following error from a component, but it’s still failing. The error is the following

[vue.js warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.

In my password component, following script, there is the following:

<template>
<div class=”form-group form-material floating” data-plugin=”formMaterial”>
<input id=”password” type=”password” class=”form-control” name=’password’>
<label class=”floating-label”>Create password</label>

<span class=”password-info”><i class=”fa fa-info-circle”></i></span>
<div class=”password-rules”>minimum 6 characters</div>

<span v-if=”this.error != null” :class=”[‘invalid-feedback’, {‘inline’: this.error != null}]“>
<strong>{ error }</strong>
</span>
</div>

</template>

<script>
import Password from ‘password-strength-meter’

export default{
props: [‘error’],

mounted: function(){
const $password = $(‘#password’, this.$el);

$password.password({
showText: false,
animate: true,
});
}
}
</script>

<style lang=”scss”>
@import ‘~password-strength-meter/dist/password.min.css’;

</style>

The problem is that the vue.js component is not loading when the page opens, and the error disappears on refresh.

In laravel blade, when using it in the following way:

@if($errors->has(‘password’)) :error=”‘{$errors->first(‘password’)}’” @endif></password-input>

In the app.js

there is following script

Vue.component(‘password-input’, require(‘./components/PasswordInput.vue’));

new Vue({
el: ‘#app’
});

Can someone guide me on how I fix it? I would appreciate if someone could guide me about this issue.

Solution :

I think this code is syntactically incorrect, or maybe you left out some parts of the code:

@if($errors->has(‘password’)) :error=”‘{$errors->first(‘password’)}’” @endif></password-input>

Could have been something like:

<password-input>
if($errors->has(‘password’)) :error=”‘{$errors >first(‘password’)}’” @endif
</password-input>

So, this must be something more than there is to struggle with. I let users store images, now privately, hence I need to be able to request images with the Authorization header. <img> doesn’t allow this however (and no, I don’t want to add a ?token=xxx to the request). So there is to load the image using axios.get and then convert the binary representation of the image to Base64, and embed the image using the Data URI. Simple, right?

So what there is to do is img.src=data:image/jpeg;base64,xxxxxxxxx where all the x:s should be replaced with the Base64 representation of the image. I tried using btoa but only got about 20 characters in my Base64. The image is on 700Kb.

Can it be that btoa can’t handle images that size?
Are there any other way of doing this?

I do not use browserify or webpack, so I don’t want to use Buffer to solve this.

Solution :

try this.

getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
console.log(reader.result);
};
},

this.getBase64(this.selected_file);