link2055 link2056 link2057 link2058 link2059 link2060 link2061 link2062 link2063 link2064 link2065 link2066 link2067 link2068 link2069 link2070 link2071 link2072 link2073 link2074 link2075 link2076 link2077 link2078 link2079 link2080 link2081 link2082 link2083 link2084 link2085 link2086 link2087 link2088 link2089 link2090 link2091 link2092 link2093 link2094 link2095 link2096 link2097 link2098 link2099 link2100 link2101 link2102 link2103 link2104 link2105 link2106 link2107 link2108 link2109 link2110 link2111 link2112 link2113 link2114 link2115 link2116 link2117 link2118 link2119 link2120 link2121 link2122 link2123 link2124 link2125 link2126 link2127 link2128 link2129 link2130 link2131 link2132 link2133 link2134 link2135 link2136 link2137 link2138 link2139 link2140 link2141 link2142 link2143 link2144 link2145 link2146 link2147 link2148 link2149 link2150 link2151 link2152 link2153 link2154 link2155 link2156 link2157 link2158 link2159 link2160 link2161 link2162 link2163 link2164 link2165 link2166 link2167 link2168 link2169 link2170 link2171 link2172 link2173 link2174 link2175 link2176 link2177 link2178 link2179 link2180 link2181 link2182 link2183 link2184 link2185 link2186 link2187 link2188 link2189 link2190 link2191

[Vue.js] Vuejs <router-link> same route but different parameter

there is the component: same route but different parameter

<router-link :to=”{name: ‘menu1-mostrar’, params: {atr: var1}”>
Menu1
</router-link>

<router-link :to=”{name: ‘menu1-mostrar’, params: {atr: var2}”>
Menu2
</router-link>

I’m not getting the component to update automatically. I can only update by clicking on another menu item that has the different route.

Note that menu 1 and menu 2 use the same route. When I click menu 1 and then if to click menu 2 it does not call the route again. there is to call for example menu 3 that uses different route and then menu 2 I need the route always be called independent if when already in it.

Solution :

Because the route is the same, the component does not have to be changed, from a vue-router point of view.

the component must be reactive to the parameter: Change the component values when the parameter change.

Solution 1: Watch for the parameter change, inside the component.

watch:{
atr(newValue, oldValue){
//handle change, maybe refresh
}
}

Solution 2: Use the parameter inside computed values:

computed:{
myBusinessValue(){
return this.atr + “ is the value of the param atr!!!”
}
}

Depending of what happend when the parameter change, you will use sol1 or sol2. You can give more details about that to guide you on one or the other.

[Vue.js] How to pass event from nested child component?

there is the following three components. Basically I need the submit event from the CustomForm component but its’ only passed to the parent component. Is there an easy way to do this? to avoid using an event bus.

CustomForm.vue

<template>
<form @submit.prevent=”submit”>
<slot />
</form>
</template>

<script>
export default {
methods: {
submit() {
this.$emit(‘onSubmit’)
}
}
}
</script>

FormHolder.vue

<template>
<div>
<CustomForm>
<slot />
<FormSubmit />
</CustomForm>
</div>
</template>

Page.vue

<template>
<FormHolder @onSubmit=”submit”>
My input fields…
</FormHolder>
</template>

Solution :

Without an event bus or Vuex, you need to bubble up the event so that when CustomForm emits an event, FormHolder emits an event up to Page:

<template>
<div>
<CustomForm @onSubmit=”submit”>
<slot />
<FormSubmit />
</CustomForm>
</div>
</template>

[Vue.js] Can't get component data initialization with prop value to work

I’m trying to pass an array as prop to a child component to use it there localy.The main idea would be to be able to edit this array in child component and then pass it to php via axios.
When i try to initialize the childs local data with the prop i get an empty array as data.

parent component

<template>
<stocare-comanda v-if=”isStocareComandaActive == true” :comanda=”comanda” :id=”id”></stocare-comanda>
</template>

<script>
export default {
data: function() {
return {
lista: [],
comanda: [],
id: “”,
isStocareComandaActive: “false”
};
},
methods:{
stocare: function() {
this.id = event.currentTarget.id;
this.isStocareComandaActive = true;
axios
.post(“../stocare/deschide_comanda”, { id: this.id })
.then(response => {
this.comanda = response.data.data;
// console.log(response.data);
});
}
}
};
</script>

child component

<script>
export default {
props: [“id”, “comanda”],

data: function() {
return {
cmd: this.comanda
};
},
methods: {},
mounted() {

}
};
</script>

Expected result:
In my child component, cmd should get the array from comanda prop.

Actual result:

actual result

Solution :

this is merely speculation but when guessing during the initialization of the child component, this.comanda in the parent component is empty, and thus it initializes cmd with empty array.

try setting

mounted(){

this.cmd = this.comanda
}

if this doesn’t work it means you are changing comanda variable in the parent so

return{
cmd: this.comanda
}

doesn’t work, because this only sets cmd in the first initialization of the variable.

[Vue.js] Cannot set property 'currentStatus' of undefined using this

when trying to show a state of formSubmit in vue.js js. The problem is that when not so familiar with using “this” and when now getting error some places in the code when trying to state the status using “this.currentStatus”.

This is my code:

const STATUS_INITIAL = 0
const STATUS_SAVING = 1
const STATUS_SUCCESS = 2
const STATUS_FAILED = 3
export default {
name: ‘Dashboard’,
data () {
return {
file: ‘’,
uploadError: null,
currentStatus: null,
uploadFieldName: ‘photos’
}
},
computed: {
clientId () {
return parseInt(this.$route.params.id)
},
isInitial () {
return this.currentStatus === STATUS_INITIAL
},
isSaving () {
return this.currentStatus === STATUS_SAVING
},
isSuccess () {
return this.currentStatus === STATUS_SUCCESS
},
isFailed () {
return this.currentStatus === STATUS_FAILED
}
},
methods: {
handleFileUpload () {
this.file = this.$refs.file.files[0]
console.log(this.file)
},
filesChange (fieldName, fileList) {
// handle file changes
const formData = new FormData()

// append the files to FormData
Array
.from(Array(fileList.length).keys())
.map(x => {
formData.append(fieldName, fileList[x], fileList[x].name)
})

// save it
this.submitFile(formData)
},
submitFile (formData) {
this.currentStatus = STATUS_SAVING
console.log(this.currentStatus)
var clientId = this.clientId
var reader = new FileReader()
reader.readAsDataURL(this.file)
reader.onload = function () {
var asim = reader.result
formData.append(‘file’, this.file)
let promises = []
promises.push(
performRpcWithPromise(‘insertContract’, [
asim, clientId
]).then(function (res) {
console.log(res)
this.currentStatus = STATUS_SUCCESS
console.log(this.currentStatus)
})
)
}
}
}
}

And this is my form:

<p v-if=”isSuccess”>
DONE
</p>
{currentStatus}
<form enctype=”multipart/form-data” novalidate>
<input type=”file” placeholder=”Velg en fil” id=”file” ref=”file” v-on:change=”handleFileUpload()”
accept=”application/pdf” class=”input-file” @change=”filesChange($event.target.name, $event.target.files); fileCount = $event.target.files.length”>
<p v-if=”isSuccess”>
wow
</p>
<p v-if=”isSaving”>
Uploading { fileCount } files…
</p>
</form>

I followed this guide
The error when getting is this line: (inside the promise)

this.currentStatus = STATUS_SUCCESS

That is little strange for me because this.currentStatus = STATUS_SAVING is working and showing the number “1”, but not inside the promise (.then).

Anyone can see why this is not working inside the promise but outside?

Solution :

You can use arrow function or closure:

var self = this
reader.onload = function () {
var asim = reader.result
formData.append(‘file’, self.file)
let promises = []
promises.push(
performRpcWithPromise(‘insertContract’, [
asim, clientId
]).then(function (res) {
console.log(res)
self.currentStatus = STATUS_SUCCESS
console.log(self.currentStatus)
})
)
}

If you want to use arrow function, please try

reader.onload = () => {
var asim = reader.result
formData.append(‘file’, this.file)
let promises = []
promises.push(
performRpcWithPromise(‘insertContract’, [
asim, clientId
]).then((res) => {
console.log(res)
this.currentStatus = STATUS_SUCCESS
console.log(this.currentStatus)
})
)
}

Solution 2:

Try using arrow function instead. Like this:

.then(res => {
console.log(res)
this.currentStatus = STATUS_SUCCESS
console.log(this.currentStatus)
})

I believe it’s similar to this.

[Vue.js] Veevalidate Validate form before POST request?

when using Veevalidate and Buefy to validate a form before a POST request. when able to validate the form correctly, but the POST request method runs before the validation.

when getting a bit confused on how to call the methods in order:

Validate form
POST request

Codesandbox: https://codesandbox.io/s/mj1vy2vq0j

Code overview

<b-modal>
<form @submit.prevent=”validateBeforeSubmit”>


<button type=”submit” class=”button is-primary” @click=”postItem()”>Submit</button>
<button type=”button” class=”button” @click=”isAddModalActive=false”>Cancel</button>
</form>
</b-modal>

<script>

methods: {
validateBeforeSubmit() {
this.$validator.validateAll().then(result => {
if (result) {
this.$toast.open({
message: “Form is valid!”,
type: “is-success”,
position: “is-bottom”
});
}
this.$toast.open({
message: “Form is not valid! Please check the fields.”,
type: “is-danger”,
position: “is-bottom”
});
});
},
postItem() {
alert(“postItem function was called”);
}
}
</script>

Solution :

You can call the submit function in the validateBeforeSubmite() function

methods: {
validateBeforeSubmit() {
this.$validator.validateAll().then(result => {
if (result) {
this.$toast.open({
message: “Form is valid!”,
type: “is-success”,
position: “is-bottom”
});
this.postItem()// call the post function here and remove from @click in the submit button
}
this.$toast.open({
message: “Form is not valid! Please check the fields.”,
type: “is-danger”,
position: “is-bottom”
});
});
},
postItem() {
alert(“postItem function was called”);
}
}

[Vue.js] Install stencil component using NPM, its method can not use directly in react. js and vue. js

to use the stencil component method in reacting.js and vue.js, but I can not use this method. This method is created using @METHOD in stencil.js . My code is below:

IN REACT.JS

<li-rating ref={this.liRatingFontAwesome}></li-rating>

liRatingFontAwesome = React.createRef();
var liRating = this.refs.liRatingFontAwesome;
liRating.setSvgString(); <= Thit method can’t find.

IN VUE.JS

<li-rating id=”liRatingFontAwesome”></li-rating>

var liRating = document.getElementById(“liRatingFontAwesome”);
liRating.setSvgString(); <= Thit method can’t find.

vue.esm.js?efeb:1897 TypeError: liRating.setSvgString is not a function
at VueComponent.mounted (RateDemo.vue?30fb:150)
at invokeWithErrorHandling (vue.esm.js?efeb:1863)
at callHook (vue.esm.js?efeb:4222)
at Object.insert (vue.esm.js?efeb:3148)
at invokeInsertHook (vue.esm.js?efeb:6351)
at Vue.patch [as __patch__] (vue.esm.js?efeb:6570)
at Vue._update (vue.esm.js?efeb:3948)
at Vue.updateComponent (vue.esm.js?efeb:4069)
at Watcher.get (vue.esm.js?efeb:4482)
at new Watcher (vue.esm.js?efeb:4471)

Solution :

This could be a timing issue. Even though the DOM element exists, Stencil may not have completed loading the component, so the method may not yet exist in the prototype. As a test, try calling the method from within a setTimeout() for example:

<li-rating id=”liRatingFontAwesome”></li-rating>

var liRating = document.getElementById(“liRatingFontAwesome”);
setTimeout(() => liRating.setSvgString(), 2000);

[Vue.js] How can i use my component method in my vue?

there is a method “aggiornaQuantity” in this component that i would use in my vue. How can i do?
Obviously I did various tests without any success

Vue.component(‘todo-item’, {
props: [‘todo’],
template: ‘…’,
methods:
{
aggiornaQuantity: function()
{
return this.todo.quantity = this.value ;
}
}

var app7 = new Vue
(
{
el: ‘#app-7’,
data:
{
message: ‘${Message}’,
risultato: true,
groceryList: [],
product: ‘’,
selected: ‘’,
},
methods:
{
…..
}

Solution :

Edit: I’m not sure if you want to know how to use the function or why the function doesn’t work (as commented above). If it’s the former, here’s the answer:

You have to call it in one of the lifecycle instances. Most of the time, we call it in mounted().


methods: {
foo () {
// do something
},
},
mounted() {
this.foo();
},

[Vue.js] How to add slide transition in dropdown menu of navbar in boostrap 4 with vue js transition

when trying to add slide up and down the transition on the bootstrap 4 dropdown menus using vue.js transition.

The transition is not working

I tried using the transition element but the animation is not working.

<li class=”nav-item dropdown”>
<a class=”nav-link dropdown-toggle” href=”#” id=”navbarDropdown” role=”button” data-toggle=”dropdown” aria-haspopup=”true” aria-expanded=”false”>
For Individuals
</a>
<transition name=”list”>
<div class=”dropdown-menu” aria-labelledby=”navbarDropdown”>
<a class=”dropdown-item” href=”#”>Income Tax Return</a>
<a class=”dropdown-item” href=”#”>TDS</a>
<div class=”dropdown-divider”></div>
<a class=”dropdown-item” href=”#”>Legal Services</a>
</div>
</transition>
</li>

.list-enter {
opacity: 0;
}
.list-enter-active {
animation: slide-in .5s ease-out forwards;
}
.list-leave-to, .list-leave-active {
opacity: 0;
animation: slide-out .5s ease-out forwards;
}
@keyframes slide-in {
from {
transform: translateY(20px);
}
to {
transform: translateY(0);
}
}
@keyframes slide-out {
from {
transform: translateY(0);
}
to {
transform: translateY(20px);
}
}

The dropdown menu should slide in and slide out

Solution :

vue.js will detect and apply the transition only for some conditions. Please read Transitioning Single Elements/Components. So in this case I think v-show is our best choice.

So the template should be something like:

<div id=”app”>
<div class=”dropdown”>
<button class=”btn btn-secondary dropdown-toggle” data-toggle=”dropdown”>
Dropdown button
</button>
<transition name=”menu”>
<div class=”dropdown-menu” v-show=”show”>
<a class=”dropdown-item”>Action</a>
<a class=”dropdown-item”>Another action</a>
<a class=”dropdown-item”>Something else here</a>
</div>
</transition>
</div>
</div>

Then you have to trigger show variable when Bootstrap show and hide dropdown. You can do this by listen to show.bs.dropdown and hide.bs.dropdown events:

let dropdown = $(this.$el).find(‘.dropdown’)
let menu = $(this.$el).find(‘.dropdown-menu’)

dropdown.on(‘show.bs.dropdown’, () => {
this.show = true
})

dropdown.on(‘hide.bs.dropdown’, () => {
menu.css(‘display’, ‘block’) // This prevent element hide before animation
this.show = false
})

Live Example

Note: In this example I use margin-top to make animation instead of transform because Bootstrap is already used top and transform for the position of dropdown menu.

[Vue.js] Nodejs Backend communicate to VueJS Frontend

there is on one side my VueJS app build with Webpack and on the server side there is Node.js. I followed this article to setup my client/server : https://medium.com/@anaida07/mevn-stack-application-part-1-3a27b61dcae0

On the server side, I open a .jar file with some arguments. Like that :

var exec = require(‘child_process’).exec, child;
child = exec(‘/usr/bin/java -jar ./myjar.jar -arg -arg2’,
function (error, stdout, stderr){
console.log(‘stdout: ‘ + stdout);
console.log(‘stderr: ‘ + stderr);
if(error !== null){
console.log(‘exec error: ‘ + error);
}
});

Everything works fine separately. But now, how to communicate between those two ? to do 2 things at the end :
1. Fetch the file output and display it into a VueJS component
2. Set arguments value using a form in my frontend.

How should i processed to achieve those two things ?
Thanks for the time !

Solution :

First :
This can achieved easily using a http server
Read https://nodejs.org/api/http.html

const http = require(‘http’);
const exec = require(‘child_process’).exec;
const server = http.createServer((req, res) => {
child = exec(`/usr/bin/java -jar ./myjar.jar -arg -arg2`,function (error, stdout, stderr){
res.write(stdout);
console.log(‘stderr: ‘ + stderr);
if(error !== null){
console.log(‘exec error: ‘ + error);
}
server.listen(8080);

Second , you can easily get the request parameters in the req object .

[Vue.js] How to hide menu in Combobox if the search value is empty Vuetify?

there is a simple Combobox component

And it to hide the menu part when the input is empty (so when a match is not found).
And to show it again when the match is found.
I wan unable to find anything in props of combobox and menu in the docs.

Any help will be appreciated.

<v-combobox
v-model=”select”
:items=”states”
:search-input.sync=”search”
label=”Select a favorite activity or create a new one”
\></v-combobox>

new Vue({
el: ‘#app’,
data () {
return {
select: ‘Any value’,
search: null,
items: [],
states: [
‘Alabama’,
‘Alaska’,
‘American Samoa’,
‘Arizona’,
‘Arkansas’,
‘California’,
‘Colorado’,
]
}
},
watch: {
search (val) {
if(val && val !== this.select) {
this.querySelections(val)
} else {
console.log(val)
}
}
},
methods: {
querySelections (v) {
// Simulated ajax query
setTimeout(() => {
this.items = this.states.filter(e => {
return (e || ‘’).toLowerCase().indexOf((v || ‘’).toLowerCase()) > -1
})
}, 500)
}
}
})

UPDATE

I think I found the solution

I added :menu-props=”{value: autoselectMenu}” to the combobox then I created autoselectMenu: false property in my data. And in my watcher I did this

search (val) {
if(val && val !== this.select) {
this.querySelections(val)
this.autoselectMenu = true
} else if(!val) {
this.autoselectMenu = false
}
}

Link

Solution :

You can pass custom value of value prop in menu-props attribute, so just set it to false when the search is empty, and don’t pass it so it preserves default behaviour:

<v-combobox :menu-props=”menuProps”

// …

computed: {
menuProps() {
return !this.search ? {value: false} : {}
}
},

EDIT
One line:

<v-combobox :menu-props=”{ …(!search && {value:false}) }”