link137 link138 link139 link140 link141 link142 link143 link144 link145 link146 link147 link148 link149 link150 link151 link152 link153 link154 link155 link156 link157 link158 link159 link160 link161 link162 link163 link164 link165 link166 link167 link168 link169 link170 link171 link172 link173 link174 link175 link176 link177 link178 link179 link180 link181 link182 link183 link184 link185 link186 link187 link188 link189 link190 link191 link192 link193 link194 link195 link196 link197 link198 link199 link200 link201 link202 link203 link204 link205 link206 link207 link208 link209 link210 link211 link212 link213 link214 link215 link216 link217 link218 link219 link220 link221 link222 link223 link224 link225 link226 link227 link228 link229 link230 link231 link232 link233 link234 link235 link236 link237 link238 link239 link240 link241 link242 link243 link244 link245 link246 link247 link248 link249 link250 link251 link252 link253 link254 link255 link256 link257 link258 link259 link260 link261 link262 link263 link264 link265 link266 link267 link268 link269 link270 link271 link272 link273

[Vue.js] Can namespaced modules handle mutations to the root namespace?

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

[Vue.js] Vue.js doesn't update value if I use an object in another object for select option

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>

[Vue.js] Working with multiple classes in vuejs2 at same page

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.

[Vue.js] VueJS updates component keeping old values

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”/>

[Vue.js] Mock data within Laravel to be used with Vue.js

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

[Vue.js] Custom swal button not firing their specific function

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

[Vue.js] call external javascript functions inside vue instance

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

[Vue.js] In vee-validate,how can i validate part of form?

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.

[Vue.js] Why vue js component does not showing in laravel blade?

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>

[Vue.js] Can't create Base64 representation of binary JPEG

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