link959 link960 link961 link962 link963 link964 link965 link966 link967 link968 link969 link970 link971 link972 link973 link974 link975 link976 link977 link978 link979 link980 link981 link982 link983 link984 link985 link986 link987 link988 link989 link990 link991 link992 link993 link994 link995 link996 link997 link998 link999 link1000 link1001 link1002 link1003 link1004 link1005 link1006 link1007 link1008 link1009 link1010 link1011 link1012 link1013 link1014 link1015 link1016 link1017 link1018 link1019 link1020 link1021 link1022 link1023 link1024 link1025 link1026 link1027 link1028 link1029 link1030 link1031 link1032 link1033 link1034 link1035 link1036 link1037 link1038 link1039 link1040 link1041 link1042 link1043 link1044 link1045 link1046 link1047 link1048 link1049 link1050 link1051 link1052 link1053 link1054 link1055 link1056 link1057 link1058 link1059 link1060 link1061 link1062 link1063 link1064 link1065 link1066 link1067 link1068 link1069 link1070 link1071 link1072 link1073 link1074 link1075 link1076 link1077 link1078 link1079 link1080 link1081 link1082 link1083 link1084 link1085 link1086 link1087 link1088 link1089 link1090 link1091 link1092 link1093 link1094 link1095

[Vue.js] Vue triggering function with params from child unexpected

there is the following component:

<template>
<button class=”button” @[click]=”action”>{ text }</button>
</template>

<script>
export default {
name: “Button”,
props: {
action: {
type: Function,
required: false
},
text: {
type: String,
required: true
},
inputType: {
type: String,
required: false
}
},
computed: {
click() {
return this.action ? “click” : null;
}
}
};
</script>

However when I pass a function as the action with a parameter then the function is already triggered on render. Without a parameter it works fine.

<v-button inputType=”button” :action=”say(‘Hello’)” text=”Alert” />
<v-button inputType=”button” :action=”say” text=”Alert” />

The triggered function:

say(message) {
alert(message);
}

You can see the behaviour here. Looking at this I would expect it to work with passing params.

So my question is how can I prevent the trigger on render?

Solution :

Using $emit

Instead of passing a function into the child component, you could instead emit a clicked event; e.g:

<button class=”button” @click=”$emit(‘clicked’)”>{ text }</button>

Then listen to the emitted event on the component itself, triggering the function:

<v-button inputType=”button” @clicked=”say(‘Hello’)” text=”Alert” />

Although emitting and handling events is a neat way to communicate from a child component to its parent, it can break down somewhat when the component emitting the event is not a direct descendant; e.g: where the component is a grandchild.

vue.js does not implicitly bubble events up through the component tree, I believe this is by design to ensure event behaviour is explicit.

Using <slot>

In this case, it’s often desirable to use slots to create a component that as access to the scope in which it was created, but then nest it within another child component.

<modal>
<v-button @clicked=”say(‘hi)” text=”Alert”/>
</modal>

Using a higher-order function

Otherwise, if you need to pass a function to a child component, and that function also has an argument, you’ll have to create it as a higher-order function.

In the case, you want to pass the say method to a child, with an argument. You want to pass the function but not invoke it, but when you pass an argument to say() you are invoking it there and then:

<v-btn :action=”say(‘hi’)”>

The solution here is to rewrite say so it also returns a function, which will then be invoked when the button is clicked:

say (message) {
return () => alert(message)
}

This implies that you must invoke the say method when passing it to the button component even if you are not passing a message to that button instance. So, the following will work:

<v-button :action=”say()” text=”Alert”/>

But this will not because it does not invoke the inner function:

<v-button :action=”say” text=”Alert”/>

Hope this helps :)

[Vue.js] vue js dont update my style in a div only at the first loop

there is an selection with 4 options. if i click on an option to change my style in my div

i tried it with setInterval() on console.log() it shows my value correctly but vue.js js dont update it

<div v-bind:style=”{‘box-shadow’: schatten, width: breite, height: hoehe, ‘text-align’: center, margin: mitte, padding: abstand, background: backcolor}”>

setInterval(function(){
var e = document.getElementById(“selection”);
var strUser = e.options[e.selectedIndex].value;
var box = new Vue({
el: ‘#anmeldebox’,
data: {

schatten: ‘0px 0px 25px black’,
breite: ‘400px’,
hoehe: ‘200px’,
center: ‘center’,
mitte: ‘0 auto’,
abstand: ‘20px’,
backcolor: strUser

}
});

}, 3000);

so strUser get a other value but it still doesnt update

Solution :

strUser is not a vue.js data item, and so is not reactive. You should be updating backcolor. You should also not be re-creating the vue.js instance every time the interval fires.

You should have vue.js control both the select and the div. Using an interval to poll a select is terribly hacky.

Here is a simple example of a select controlling the background color of a div.

new Vue({
el: ‘#app’,
data: {
selectedStyle: ‘red’
}
});
.box {
height: 20em;
width: 20em;
}
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id=”app”>
<select v-model=”selectedStyle”>
<option>red</option>
<option>blue</option>
</select>
<div class=”box” :style=”{backgroundColor: selectedStyle}”></div>
</div>

[Vue.js] Fabric js - Freedrawing on hover of canvas instead of click/mouse down

When hovering on the canvas (Free drawing with Fabric js), I’d like to mimic the mouse down/click event and have the user create their drawing/paths.

Would this at all possible?

Here is more information about working with events with Fabric - https://github.com/fabricjs/fabric.js/wiki/working-with-events#demos-and-examples

I’m using Vuejs but totally open to anything to get to a solution!

var app = new Vue({
el: ‘#app’,
data(){
return {}
},
mounted(){
var canvas = new fabric.Canvas(‘canvas’);
canvas.isDrawingMode = true
canvas.setHeight(window.innerHeight)
canvas.setWidth(window.innerWidth)

canvas.freeDrawingBrush.color = ‘blue’
canvas.freeDrawingBrush.width = 40
},
methods: {}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id=”app”>
<!– Draw as if I’ve clicked BUT when hovering over canvas –>
<canvas id=”canvas”></canvas>

</div>

Solution :

Since event handlers related to isDrawingMode are triggered by mouse up and mouse down, one possible solution is to customize those handlers to make sure that:

Default mouse down event handler is now triggered only once at the time first mouse move is detected; mouse down handler is removed.
Mouse up handler is removed to ensure brushing line will not be interrupted.

Here is the original code of fabric.js to handle those events: http://fabricjs.com/docs/fabric.js.html (line 11431 to 11472)

Here is my sample

var enableDrawingMode = false;

var app = new Vue({
el: ‘#app’,
mounted(){
var canvas = new fabric.Canvas(‘canvas’);
canvas.isDrawingMode = true
canvas.setHeight(window.innerHeight)
canvas.setWidth(window.innerWidth)

// set up canvas drawing logic based on original mouse down event
canvas._isCurrentlyDrawing = true;

canvas. _onMouseDownInDrawingMode = function(e) {
if (this.getActiveObject()) {
this.discardActiveObject(e).requestRenderAll();
}
if (this.clipTo) {
fabric.util.clipContext(this, this.contextTop);
}
this._handleEvent(e, ‘down’);
}

canvas._onMouseMoveInDrawingMode = function(e) {
var pointer = this.getPointer(e);
if (!enableDrawingMode) {
console.log(‘enable original mouse move event only one’)
enableDrawingMode = true;
this.freeDrawingBrush.onMouseDown(pointer);
}
this.freeDrawingBrush.onMouseMove(pointer);
this.setCursor(this.freeDrawingCursor);
this._handleEvent(e, ‘move’);
}

canvas._onMouseUpInDrawingMode = function(e) {
if (this.clipTo) {
this.contextTop.restore();
}
this._handleEvent(e, ‘up’);
}

canvas.freeDrawingBrush.color = ‘blue’
canvas.freeDrawingBrush.width = 40
}
})
<script src=”https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.6/fabric.min.js"></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id=”app”>
<!– Draw as if I’ve clicked BUT when hovering over canvas –>
<canvas id=”canvas”></canvas>

</div>

with override functions to achieve drawing on mouse move.

[Vue.js] Render and Compile String using vue.js

There is a requirement where all html elements are defined in a JSON file and used in the template.

There is a function - “markComplete” which needs to be triggered on change of a checkbox.

Code Template:

<template>
<span v-html=”htmlContent”></span>
</template>

<script>
data(){
return{
htmlContent: “<input type=’checkbox’ v-on:change=’markComplete’>”
}
}
</script>

Above code won’t work as onChange event won’t be mounted, and I get Uncaught ReferenceError: markComplete is not defined

Is there any way to make this work?

Solution :

You are trying to compile the string as vue.js Templates using v-html.

Note that the contents are inserted as plain HTML - they will not be compiled as vue.js templates

Read about v-html in vue.js Docs.

As solution you can read this article

You don’t want to use a library? Checkout the code below:

First create a js file (preferably RenderString.js):

import vue.js from “vue”

Vue.component(“RenderString”, {
props: {
string: {
required: true,
type: String
}
},
render(h) {
const render = {
template: “<div>” + this.string + “</div>”,
methods: {
markComplete() {
console.log(‘the method called’)
}
}
}
return h(render)
}
})

Then in the parent component:

<template>
<div><RenderString :string=”htmlContent” /></div>
</template>

<script>
import RenderString from “./components/RenderString”

export default {
name: “App”,
data: () => ({
htmlContent: “<input type=’checkbox’ v-on:change=’markComplete’>”
})
}
</script>

Note: I didn’t run the code above but I created a similar working CodeSandbox Example

[Vue.js] Does React support pipes or filters like Angular and Vue?

to know Can there is pipes or filters in React?

for example something like this:

import { Pipe, PipeTransform } from ‘@angular/core’;
/*
* Raise the value exponentially
* Takes an exponent argument that defaults to 1.
* Usage:
* value | exponentialStrength:exponent
* Example:
* { 2 | exponentialStrength:10 }
* formats to: 1024
*/
@Pipe({name: ‘exponentialStrength’})
export class ExponentialStrengthPipe implements PipeTransform {
transform(value: number, exponent: string): number {
let exp = parseFloat(exponent);
return Math.pow(value, isNaN(exp) ? 1 : exp);
}
}

OR

{ message | capitalize }

filters: {
capitalize: function (value) {
if (!value) return ‘’
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}

Is it possible in React too?

Solution :

You need to install a additional package with:

npm install –save react react-pipeline

the full information you can find in here:
https://www.npmjs.com/package/react-pipeline

[Vue.js] Unable to move breadcrumb items to float to the right

when developing an application using Vue.js and Bootstrap. when developing a breadcrumb in which the icons to be displayed to the right and the text “Files” to float to the left.

<script src=”https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div class=”conatainer-fluid”>
<ol class=”breadcrumb” style=”padding: 0rem 1rem 0rem; background-color: transparent”>
<li class=”breadcrumb-item active”>Files</li>
<li class=”pull-right”><i class=”fa fa-sort-amount-asc”></i></li>
<li class=”pull-right”><i class=”fa fa-th-large”></i></li>
<li class=”pull-right”><i class=”fa fa-list-ul”></i></li>
</ol>
</div>
<hr id=”breadcrumb_hr”>

Despite using pull-right, the breadcrumb icons aren’t floating to the right.

The breadcrumb looks like this

What wrong am I doing here?

Solution :

use this css, its work

.breadcrumb{
display: flex;
width: 100%;

}
.breadcrumb-item.active{
margin-right:auto;
}

or use html

<div class=”conatainer-fluid”>
<ol class=”breadcrumb” style=”display:flex; width:100%; padding: 0rem 1rem 0rem; background-color: transparent”>
<li class=”breadcrumb-item active” style=”margin-right:auto”>Files</li>
<li class=”pull-right”><i class=”fa fa-sort-amount-asc”></i></li>
<li class=”pull-right”><i class=”fa fa-th-large”></i></li>
<li class=”pull-right”><i class=”fa fa-list-ul”></i></li>
</ol>
</div>

[Vue.js] Add functions to nuxt.config.js

Basically there is an app and on generate, I generate all pages, a sitemap and a RSS feed currently though there is to make the same axios call 3 times

like so

nuxt.config.js

generate: {
routes: function() {
return axios.get(data)
.then(res => {

})
}
},
sitemap: {
routes: function() {
return axios.get(data)
.then(res => {

})
}
},
feed: {
etc…
}

now Is there a way I can call the data once and feed it to each of these module methods?? I tried putting some functions at the top of the nuxt.config.js but I was getting errors on generate

Solution :

You could try saving the promise into a variable for re-use, eg

const routesPromise = axios.get(data).then(({ data }) => data)

// snip

generate: {
routes () {
return routesPromise.then(data => {
// …
})
},
sitemap: {
routes () {
return routesPromise.then(data => {
// …
})
}
},
// etc

Adding .then() calls to the promise won’t modify the original resolved value so you can keep using it as many times as you want while only making a single HTTP request.

[Vue.js] V-tooltip Close Popover from a method

In VueJS, I’m using v-tooltip (https://github.com/Akryum/v-tooltip) for popovers.

In order to close a popup, they provide a directive called ‘v-close-popover’ which I can assign to a button/link inside the popover to close the popup. This works well.

However, there is a requirement where I need to close this popup from a vue.js method. But I dn’t know how to trigger closing of the popover from the method.

Solution :

This is how you can achieve this.It will display tooltip on mouseOver event and remove on mouseLeave event.
In template->

<i
id=”requiredIcon”
aria-hidden=”true”
v-tooltip=”{content: ‘Required option is not available for this question.’, show: isOpen, trigger: ‘manual’}”
@mouseover=”showTooltip”
@mouseleave=”removeTooltip”
\></i>

In Script->

data() {
return {
isOpen: false,
};
},
methods:{
showTooltip() {
this.isOpen = true;
},
removeTooltip() {
this.isOpen = false;
}
}

[Vue.js] How to get the value with konva at vue.js

I can move and transfer the rectangles with the code below.
I used konva library at vue.js
This works well.
But to get the x,y position to save into local-storage after moving it
Could you teach how to get that?
And when sorry for the long code
You can attach this code at ‘.vue’ which works well without problem.
It moves and transfer well, but I can ‘t see the value of position moving it

<template>
<div>
<v-stage ref=”stage” :config=”stageSize” @mousedown=”handleStageMouseDown”>
<v-layer ref=”layer”>
<v-rect v-for=”item in rectangles” :key=”item.id” :config=”item”/>
<v-transformer ref=”transformer”/>
</v-layer>
</v-stage>
<div>
<p>{ rectangles[0].x }</p>
<button @click=”addCounter”>+</button>
<button @click=”subCounter”>-</button>
<button @click=”position”>SAVE</button>
</div>
</div>
</template>

<script>
const width = window.innerWidth;
const height = window.innerHeight;

export default {
data() {
return {
stageSize: {
width: width,
height: height
},
rectangles: [
{
x: 150,
y: 100,
width: 100,
height: 100,
fill: “red”,
name: “rect1”,
draggable: true
},
{
x: 150,
y: 150,
width: 100,
height: 100,
fill: “green”,
name: “rect2”,
draggable: true
}
],
selectedShapeName: “”
};
},
methods: {
position() {
localStorage.setItem(this.rectangles[0].x, true);
},
addCounter() {
this.rectangles[0].x++;
},
subCounter() {
this.rectangles[0].x–;
},

handleStageMouseDown(e) {
// clicked on stage - cler selection
if (e.target === e.target.getStage()) {
this.selectedShapeName = “”;
this.updateTransformer();
return;
}

// clicked on transformer - do nothing
const clickedOnTransformer =
e.target.getParent().className === “Transformer”;
if (clickedOnTransformer) {
return;
}

// find clicked rect by its name
const name = e.target.name();
const rect = this.rectangles.find(r => r.name === name);
if (rect) {
this.selectedShapeName = name;
} else {
this.selectedShapeName = “”;
}
this.updateTransformer();
},
updateTransformer() {
// here we need to manually attach or detach Transformer node
const transformerNode = this.$refs.transformer.getStage();
const stage = transformerNode.getStage();
const { selectedShapeName } = this;

const selectedNode = stage.findOne(“.” + selectedShapeName);
// do nothing if selected node is already attached
if (selectedNode === transformerNode.node()) {
return;
}

if (selectedNode) {
// attach to another node
transformerNode.attachTo(selectedNode);
} else {
// remove transformer
transformerNode.detach();
}
transformerNode.getLayer().batchDraw();
}
}
};
</script>

Solution :

You can use dragmove and transform events.

<v-rect
v-for=”item in rectangles”
:key=”item.id”
:config=”item”
@dragmove=”handleRectChange”
@transform=”handleRectChange”
/>

handleRectChange(e) {
console.log(e.target); // will log current rectagle
},

Demo: https://codesandbox.io/s/lp53194w59

[Vue.js] Laravel 5.7 - vue template won't render

when trying to setup Laravel with Vue, but for some reason nothing is being rendered at the moment.

This is the code I have:

main layout file (main.blade.php)

<!doctype html>
<html lang=”{ str_replace(‘_‘, ‘-‘, app()->getLocale()) }”>
<head>
<meta charset=”utf-8”>
<meta name=”viewport” content=”width=device-width, initial-scale=1”>
<meta content=’width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no’ name=’viewport’ />

<title>Pathfinder Character Sheet</title>

<link href=”{ asset(‘css/app.css’) }”/ rel=”stylesheet”>
<link href=”{ asset(‘css/light-bootstrap-dashboard.css’) }” rel=”stylesheet”>

<link rel=”stylesheet” href=”https://pro.fontawesome.com/releases/v5.7.0/css/all.css" rel=”stylesheet”>
<link rel=”stylesheet” href=”https://static.fontawesome.com/css/fontawesome-app.css" rel=”stylesheet”>
</head>
<body>
<div id=character-sheet>
<master></master>
</div>
<link rel=”js” href=”{ asset(‘js/app.js’) }”>
</body>
</html>

app.js file

import vue.js from ‘vue’
import Master from ‘./components/layout/Master’

require(‘./bootstrap’);
require(‘./light-bootstrap-dashboard’);

window.Event = new Vue()
window.vue.js = Vue

const app = new Vue({
el: ‘#character-sheet’,
components: {
Master
},
template: ‘<Master/>’,
});

Master.vue

<template>
<div class=”wrapper” id=”character-sheet”>

<span>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt excepturi, ex exercitationem laborum beatae nostrum molestiae inventore eos amet ut debitis nam accusamus illum ipsa soluta ipsam officiis doloremque rerum.</span>

</div>
</template>

<script>

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

when not getting any error, just a blank screen (app.js file is loaded).
What am I doing wrong here?

Solution :

Remove the id=”character-sheet” from Master.vue

In app.js use as follows…..

Vue.component(‘master’, require(‘./components/layout/Master.vue’).default);

const app = new Vue({
el: ‘#character-sheet’ });

Run the command: npm run dev

Solution 2:

the HTML Id is not quoted.

Change <div id=character-sheet>
To <div id=”character-sheet”>