link274 link275 link276 link277 link278 link279 link280 link281 link282 link283 link284 link285 link286 link287 link288 link289 link290 link291 link292 link293 link294 link295 link296 link297 link298 link299 link300 link301 link302 link303 link304 link305 link306 link307 link308 link309 link310 link311 link312 link313 link314 link315 link316 link317 link318 link319 link320 link321 link322 link323 link324 link325 link326 link327 link328 link329 link330 link331 link332 link333 link334 link335 link336 link337 link338 link339 link340 link341 link342 link343 link344 link345 link346 link347 link348 link349 link350 link351 link352 link353 link354 link355 link356 link357 link358 link359 link360 link361 link362 link363 link364 link365 link366 link367 link368 link369 link370 link371 link372 link373 link374 link375 link376 link377 link378 link379 link380 link381 link382 link383 link384 link385 link386 link387 link388 link389 link390 link391 link392 link393 link394 link395 link396 link397 link398 link399 link400 link401 link402 link403 link404 link405 link406 link407 link408 link409 link410

[Vue.js] Vue warns me Cannot set reactive property on undefined, null, or primitive value null

While fetching data from Firebase when trying to set the properties of the object obtained to the UI, but when I try and set any changes to the data, it throws me this error.
Error in v-on handler: “TypeError: Cannot use ‘in’ operator to search for ‘cc’ in null.

when using vue.js in development mode, along with Firebase.Is there any concept when missing out on?

beforeCreate(){
sref.get().then(sc => {
if (sc.exists) {
console.log(sc.data()); //this logs in the correct data
this.school = sc.data(); //this too
this.cc = sc.data().cc; //also this
this.name = sc.data().name;

When I do

console.log(this.name)

In created() it displays undefined, any attempt to change or update also gives an error

vue.js warn]: Cannot set reactive property on undefined, null, or primitive value: null
[vue.js warn]: Error in v-on handler: “TypeError: Cannot use ‘in’ operator to search for ‘cc’ in null”

found in

-–> <VSelect>
<VForm>
<VCard>

TypeError: Cannot use ‘in’ operator to search for ‘cc’ in null
at Proxy.set

Solution :

Simple solution: add v-if check for the dataset, where you use v-for. Maybe you will need template to do this.

Solution 2:

I figured out where I went wrong there, in my template v-model i was using this.school, this.name, this.cc which was causing the warnings to come, but when still not clear at the internals of the working. I would like if someone pointed me to the right resources.

[Vue.js] how to use codemirror in Vue.js to send line number?

to use codemirror in Vue.js to implement two text areas. When I select some lines code in area1, the same lines code in area2 should be highlighted.

Solution :

I come up with two examples.

First, synchronize selection:

Add event listener for cursorActivity event whenever this event trigger get selection details by getCursor method then set it to second editor by setSelection method.

firstEditor.on(“cursorActivity”, () => {
let head = this.ca.getCursor(“head”);
let anchor = this.ca.getCursor(“anchor”);
secondEditor.setSelection(anchor, head);
});

Example

Second, highlight selection lines:

Again, add event listener for cursorActivity event whenever this event trigger get start and end lines of selection by getCursor method then highlight these lines in second editor.

To highlight lines, The CodeMirror has a plugin call active-line which enable by styleActiveLine option. But unfortunately I cannot get this works for multiple lines so I modify it for this case.

const WRAP_CLASS = “CodeMirror-activeline”;
const BACK_CLASS = “CodeMirror-activeline-background”;
const GUTT_CLASS = “CodeMirror-activeline-gutter”;

const clearActiveLines = function() {
for (let i = 0; i < this.lineCount(); i++) {
this.removeLineClass(i, “wrap”, WRAP_CLASS);
this.removeLineClass(i, “background”, BACK_CLASS);
this.removeLineClass(i, “gutter”, GUTT_CLASS);
}
};

const setActiveLines = function(from, to) {
clearActiveLines.call(this);
for (let i = from; i <= to; i++) {
this.addLineClass(i, “wrap”, WRAP_CLASS);
this.addLineClass(i, “background”, BACK_CLASS);
this.addLineClass(i, “gutter”, GUTT_CLASS);
}
};

CodeMirror.defineExtension(“setActiveLines”, setActiveLines);

CodeMirror.defineExtension(“clearActiveLines”, clearActiveLines);

Then use it.

firstEditor.on(“cursorActivity”, () => {
if (firstEditor.getSelection()) {
let from = this.ca.getCursor(“from”);
let to = this.ca.getCursor(“to”);
secondEditor.setActiveLines(from.line, to.line);
} else {
secondEditor.clearActiveLines();
}
});

Example

I’m not much familiar with CodeMirror but I hope this help.

[Vue.js] How to stop click propagation when clicking on a leaflet popup?

there is a popup in a leaflet map that can be closed by clicking on the ‘x’ in its upper right corner. How do I make the click event not propagate to the map itself?

I’ve tried using preventPropagate() in many places and forms, but none of them seem to work.

My latest code looks like that:

<div class=”actions” @click=”stopPropagation($event)”>

(…)

stopPropagation(e) {
e.stopPropagation()
}

The above div (.actions) is the popup’s main div.

there is also tried calling the function at a click in the popup’s component tag in the parent component, but the result was the same, meaning clicking the ‘x’ closes the popup as expected but also results in a click event in the map that lies behind.

I use vue.js and vue2-leaflet.

I appreciate any insight from you guys. Thanks!

UPDATE: actually, doesn’t matter where in the popup the click happens, it always gets propagated to the map behind.

Solution :

Could try an event modifier

Perhaps the stop modifier:

<div class=”actions” @click.stop=”closePopup”>

[Vue.js] Calling a method inside Vue component from an outside class

I’m pretty new to Vue/JS and am currently trying to build an app.

I currently have a component set up as follows (there’s obviously more to it but hopefully the below will help with my question):

<template>…</template>
<script>
export default {
data() {
return {…}
},
methods: {
method1() {
const Class1 = new Class1;
},
method2() {

}
}
}
class Class1 {}
class Class2 {
method2();
}
</script>
<style>…</style>

Now when able to use Class1 from inside method1() but is there any way I can easily call method2() from Class2?

Many thanks in advance.

Solution :

Posting a better elaborated answer:
In vue.js you can use an Event Bus method to comunicate with unrelated components. Basically is a component that is used to pass an event to other components. It can be very useful in this case.

event-bus.js:

import vue.js from ‘vue’;
export const EventBus = new Vue();

Component that will emit the event:

<template>
<div @click=”functionToEmitTheEvent()”></div>
</template>

<script>
// Import the EventBus we just created.
import { EventBus } from ‘./event-bus.js’;

export default {
data() {
return {
clickCount: 0
}
},

methods: {
functionToEmitTheEvent() {
this.clickCount++;
// Send the event on a channel (customClick) with a payload (the click count.)
EventBus.$emit(‘customClick’, this.clickCount);
}
}
}
</script>

Script that will listen the event:

// Import the EventBus.
import { EventBus } from ‘./event-bus.js’;

// Listen for the customClick event and its payload.
EventBus.$on(‘customClick’, clickCount => {
console.log(`Oh, that’s nice. It’s gotten ${clickCount} clicks! :)`)
});

All code written was copied from here: https://alligator.io/vuejs/global-event-bus/

I hope it helped!

Solution 2:

Create Class1 and Class2 outside of the component as a ES6 class and export them. Then import the classes to the component. So something like this:

Class 1

export default class Class1 {


}

Class 2

export default class Class2 {


}

And then import those classes to the vue.js component

<template>…</template>
<script>
import Class1 from ‘./class1’;
import Class2 from ‘./class2’;

export default {

data() {
return {
// the data
}
},
methods: {
method1() {
const Class1 = new Class1();
},
method2() {
const Class2 = new Class2();
..
return ‘something’;
},
method3() {
// call method 2
method2();
….
}

….

Solution 3:

Class with method foo as an example

export default class Class1 {
function foo() {};
}

Calling a function from another class could be like this:

import Class1 from ‘./class1’;
<template>…</template>
<script>
export default {
data() {
return {
methods: {
method1() {
const x = new Class1;
return x.foo()
}
}
}
}
}
</script>

Solution 4:

Thanks for the answers all - think my original question must not have been clear but I’ve managed to find the solution (stumbled across just now, after spending hours last night searching!) Here it is for anyone else wondering.

To make use of a method outside of a component, register the vue.js instance globally when created (e.g. in main.js):

app = new Vue({

})
window.App = app;

And then any methods can be called by referencing the window.App e.g.

App.method2();

Full working code:

<template>…</template>
<script>
export default {
data() {
return {…}
},
methods: {
method1() {
const Class1 = new Class1;
},
method2() {

}
}
}
class Class1 {}
class Class2 {
App.method2();
}
</script>
<style>…</style>

[Vue.js] Am I missing something for vue router transitions?

I’m trying to have a transition between my components in Vue, this is my code:

<template>
<div id=”app”>
<router-link to=”/“>Go to home</router-link>
<router-link to=”Register”>Go to register</router-link>
<transition name=”fade”>
<router-view></router-view>
</transition>
</div>
</template>

<script>
export default {
name: ‘App’
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
}

However, the transition is not working at all. It correctly switches from component to component, but without transition.

I’ve read the vue.js and vue.js Router docs, and as far as I know I’m doing exactly what the docs are saying. Anyone knows what I’m missing or doing wrong?

Solution :

Something defines the .fade-enter and .fade-appear classes. You can see this happening if you have a link that calls the debugger after one tick, and inspect the applied styling:

stopThings () {
this.$router.push({
name: ‘Login’
});

this.$nextTick(() => {
debugger;
});
}

Because the initial state is incorrect, the transition does not do anything.

Rename the transition and the transition classes to literally anything else, e.g. myfade and the transition works as expected.

Solution 2:

The transitions, as far as I can see from the code shared, looks fine. It could be that the transitions are happening outside of the view. During the transition, both elements are visible

here is an example of adding a wrapper with relative and absolute positionsing

<template>
<div id=”app”>
<router-link to=”/“>Go to home</router-link>
<router-link to=”Register”>Go to register</router-link>
<div class=”content”>
<transition name=”fade”>
<router-view></router-view>
</transition>
</div>
</div>
</template>

<script>
export default {
name: “App”
};
</script>

<style scoped>
.content {
position: relative;
}
.content > * {
position: absolute;
top: 0;
left: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>

[Vue.js] VueJS dynamic component subscribe to emit from child component

when writing VueJS (2.5.22) application using Typescript and trying to add component dynamically at run-time. I ran into two issues with Typescript. Adding child component as named slots and subscribing to emit event from child components. I was able to work around slots by appending child component, however i would like to use named slots. Any input on slot is appreciate.

when still trying to get second issue resolved of parent component subscribing to child event and updating property in parent component.

The child component is going to emit “update-value”. How do i subscribe to this event on parent component dynamically?

Thanks,

Please create tag for: vuejs-component vuejs-dynamic-component vuejs-typescript vuejs-emit

parent component adding dynamically at run-time in created method

<div>
<p>Dynamic components</p>
<div ref=”controls”></div>
</div>

export default class ParentComponent extends vue.js {

public $refs: Vue[‘$refs’] & {
controls: HTMLElement
}
public $slots: Vue[‘$slots’] & {
TextBox: TextBox
}

vuejs created method
-——————-

const labelControlContainerClass = Vue.extend(LabelControlContainer)
const textBoxClass = Vue.extend(TextBox)

const fields = table.fields
for (const key in fields) {
if (fields.hasOwnProperty(key)) {
const element = fields[key]
if (element.fieldType === ‘Char’) {
const textBoxInstance = new textBoxClass({
// props
propsData: {
value: ‘’,
placeholder: element.translatedCaption,
name: key
},
// how to subscript to “update-value” event???
})
textBoxInstance.$mount()

const instance = new labelControlContainerClass({
// props
propsData: {
caption: element.translatedCaption,
bold: false
},
})

instance.$mount()
instance.$el.appendChild(textBoxInstance.$el) // add child component, try adding named slots, but didn’t work
this.$refs.controls.appendChild(instance.$el)
}
}
}

}

label component with slot. named slot didn’t worked

<template>
<div class=”controlContainer” :class=”{vertial: labelTop}”>
<span v-bind:class=”{bold: bold}” class=”.controlContainer__cisLabel”>{caption}</span>
<slot name=’control’></slot>
<slot></slot>
</div>
</template>

<script lang=’ts’>
import vue.js from ‘vue’
import { Component, Prop } from ‘vue-property-decorator’

@Component({
})

export default class LabelControlContainer extends vue.js {
@Prop({ type: String, default: ‘’ }) public caption: string
@Prop({ type: Boolean, default: true }) public bold: boolean
@Prop({ type: Boolean, default: false }) public labelTop: boolean
}

</script>

child component that is going to added to slot and emit on value change

export default class TextBox extends vue.js {
@Prop({ type: String, default: ‘placeholder text’ }) public placeholder: string
@Prop({ type: Object, default: () => ({}) }) public attributes: any
@Prop({ type: Boolean, default: false }) public readonly: boolean
@Prop({ type: String, default: ‘text’ }) public mode: string
@Prop({ type: Boolean, default: true }) public isValid: boolean
@Prop({ type: String, default: ‘’ }) public value: string
@Prop({ type: String, default: ‘’ }) public name: string
@Prop({ type: Boolean, default: false }) public setFocus: boolean

private default = {}
private unlockable: boolean = this.readonly

private valueChanged(data: any): void {
this.$emit(‘update-value’, data.value, this.name)
}
}

Solution :

I’m not using TypeScript but I think this is not about TypeScript so I will answer using plain JavaScript.

To programmatically add slot element you can use $slots property like this:

vm.$slots.default = [‘Hello’]
vm.$slots. foo = [‘Hello’] // for named slots

But unfortunately the slots must be the array of VNodes, not normal DOM Element or vue.js Components. You can use the $createElement method to create them like so:

vm.$slots.default = [vm.$createElement(‘div’, [‘Hello’])]
vm.$slots.default = [vm.$createElement(‘HelloWorld’)] // custom component

So the code will look like that:

const TextBox = {
template: `
<div>{ text }</div>
`,
props: [‘text’]
}

const LabelControl = {
template: `
<div>
<slot name=’control’></slot>
</div>
`,
components: {
TextBox
}
}

const LabelControlComponent = Vue.extend(LabelControl)

new Vue({
el: ‘#app’,
template: `
<div>
<div ref=’controls’></div>
</div>
`,
mounted () {
let texts = [‘a’, ‘b’, ‘c’, ‘d’]
texts.forEach(text => {
let labelControl = new LabelControlComponent()
labelControl.$slots.control = [
labelControl.$createElement(‘TextBox’, {
props: { text }
})
]
labelControl.$mount()
this.$refs.controls.appendChild(labelControl.$el)
})
}
})

Listening to events from a slot child seems impossible, as it’s a different scope, but you can still use the $parent property to call a parent method directly or emit an event from the parent.

const TextBox = {
template: `
<div @click=’$parent.show(text)’>{ text }</div>
`
}

const LabelControl = {
methods: {
show (text) {
this.text = text
}
}
}

JSFiddle Example

References:

How to create Vue.js slot programatically?
vue.js pass slot template to extended component
Is it possible to emit event from component inside slot

[Vue.js] Decimal Formatting in Vue Framework

when new to vue.js Framework. My requirement is to add money currency formatting in an input box.

Formatting:
I need to add a decimal with two zeros on focus out and remove zero at focus in. The v-modal value should not change as this format is just for the user display.

I found this solution which is quite close to my requirement: https://jsfiddle.net/mani04/w6oo9b6j. There are just two additional things when not able to implement.

to use it like:

<my-currency-input id=”test1” name=”test2” v-model=”price” v-validate=”required|numeric ></my-currency-input>

there is added vee-validate.js lib for validation for my whole form. So how can I use v-validate in this example?
I don’t want to round off my string. We just need to add and remove (.00)
Here, if user enters 35.7896 it is making it 35.79. For my requirement, it should remain 35.7896 as it is already having decimal. It should only add decimal when user enter a number.

How can I do this? Should I use vue.js directive for this?

https://jsfiddle.net/mani04/w6oo9b6j/

Something like this I want

<my-currency-input id=”test1” name=”test2” v-model=”price” v-validate=”required|numeric ></my-currency-input>

Solution :

You don’t need a focus-out/focus-in method. What you need is a computed property.
Try this out:

Vue.component(‘my-currency-input’, {
template: `
<div>
<input type=”text” v-model=”currencyValue” /> { formattedCurrencyValue }
</div>`,
data: function() {
return {
currencyValue: 0,
/* formattedCurrencyValue: “$ 0.00” */
}
},
computed: {
formattedCurrencyValue: function(){
if(!this.currencyValue){ return “$0.00”}
return “$” + parseFloat(this.currencyValue).toFixed(2)
}
}
});

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

[Vue.js] Cannot display images in Vuejs

I’ve set up a carousel using bootstrap-vue. The carousel-items are created dynamically using a for loop and an array. The array contains three objects with the following keys: id, caption, text and image path. So far, when able to display the caption and text but not the images. I checked the console and there was no error. Hence, when very confused. Below are my codes and screenshots of the problem

UPDATE: when trying to fix this problem for 2 days already, help is greatly needed!

This is my project structure

This are my codes

<template>
<div>
<b-carousel
id=”carousel-1”
v-model=”slide”
:interval=”10000”
controls
indicators
background=”#ababab”
style=”text-shadow: 1px 1px 2px #333;”
@sliding-start=”onSlideStart”
@sliding-end=”onSlideEnd”
\>
<b-carousel-slide
v-for=”item in carouselItems”
:key=”item.id”
:caption=”item.caption”
:text=”item.text”
:style=”{ ‘background-image’: ‘url(‘ + item.image + ‘)’ }”
\></b-carousel-slide>
</b-carousel>
</div>
</template>

<script>

export default {
data() {
return {
carouselItems: [
{
id: 1,
caption: “Memories”,
image: “@/assets/images/Homepage-min.jpg”,
text: “Memories(1)”
},
{
id: 2,
caption: “Memories”,
image: “@/assets/images/Homepage-min.jpg”,
text: “Memories(2)”
},
{
id: 3,
caption: “Memories”,
image: “@/assets/images/Homepage-min.jpg”,
text: “Memories(3)”
}
],
slide: 0,
sliding: null
};
},
methods: {
onSlideStart(slide) {
this.sliding = true;
},
onSlideEnd(slide) {
this.sliding = false;
}
}
};
</script>

Here is a screenshot:

Update I went to take a look at the networks tab to see if I specified the wrong image path. However, the image path was correct as the status code is 304. What seems to be the problem? Can anyone help?

Update: I’ve removed the style and replaced it with the following code

:img-src=”item.image”

After I save the changes and refresh, I can see an icon indicating that the browser could not load the images.

Update I’ve successfully rendered the images to the carousel-slide. Apparently, “require” is needed if the image path is relative. I’ve updated this portion of my code to the following

data() {
return {
carouselItems: [
{
id: 1,
caption: “Memories”,
image: require(“@/assets/images/Homepage-min.jpg”),
text: “Memories(1)”
},
{
id: 2,
caption: “Memories”,
image: require(“@/assets/images/Homepage-min.jpg”),
text: “Memories(2)”
},
{
id: 3,
caption: “Memories”,
image: require(“@/assets/images/Homepage-min.jpg”),
text: “Memories(3)”
}
],
slide: 0,
sliding: null
};
},

Update However, now I face another problem, the image does not fit the entire height of the screen when in mobile mode. it to be responsive. Here is a screen shot of my problem

Update 7/5/2019 when still trying to fix this issue, can anyone help me with the CSS?

Solution :

Try using img-src=”https://xxxxx" instead of changing the style. You should get something like that in the code:

<b-carousel-slide
v-for=”item in carouselItems”
:key=”item.id”
:caption=”item.caption”
:text=”item.text”
:img-src=item.image
\></b-carousel-slide>

Or you can just use an actual img tag inside the <b-carousel-slide>:

<b-carousel-slide>
<img
slot=”img”
class=”d-block img-fluid w-100”
width=”1024”
height=”480”
src=”https://xxxxxx"
alt=”image slot”
\>
</b-carousel-slide>

You should also check the pictures ‘path’ since webpack adds a unique-id automatically to each image and can sometimes be troublesome in certain cases, just check that the webpack config is working on the images.

[Vue.js] My Vue Router transition is not working, why?

I’m trying to transition between my components using Router-links.

It correctly switches from component to component, however it does so without a transition. I followed the vue.js documentation and can’t discover what I’m missing.

To illustrate the issue, I created the following CodeSandbox that contains my project:

Link to CodeSandbox

Would really appriciate if someone could check it out!

Solution :

Add also mode=”out-in” into the transition tag

<transition name=”fade” mode=”out-in”>

Here is the link to check https://4wz714w9nw.codesandbox.io/

Solution 2:

To avoid simultaneous entering and leaving transitions, you can use transition modes.

in-out: New element transitions in first, then when complete, the current element transitions out.
out-in: Current element transitions out first, then when complete, the new element transitions in.

You can add these transition modes in mode attribute of transition tag. See docs

<transition name=”fade” mode=”out-in”>
<router-view></router-view>
</transition>

And don’t forget to add css.

.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to {
opacity: 0;
}

CodeSandbox

[Vue.js] how to make a maximum 1MB upload image?

how to make a maximum 1MB upload image?
here are the program snippets

enter image description here

enter image description here

Solution :

You can determine upload or not in before-upload. If image’s size less than 1MB, cancel the upload.

<el-upload>
:before-upload=”isImageValid”
</el-upload>

methods: {
isImageValid(image) {
const imageSize = image.size / Math.pow(1024, 2)
if (imageSize < 1) return false
return true
}
}