Software

I am using a mixin to detect mobile users. Now I don't want to import this mixin into every single component where I need it, because this way I think it is probably running multiple times at the same time.

So I tried to do it like this (in app.js):

import DetectMobile from './mixins/DetectMobile.vue' const app = new Vue({ el: '#app', mixins: [ DetectMobile ], });

But that doesn't work, when I try to access one of the variables from the mixin within a component, I get undefined.

I want to achieve this active link on my div element here you can see the example that i want to do with my code

http://jsfiddle.net/fiddleyetu/9ff79/

$(function() { $( 'ul.nav li' ).on( 'click', function() { $( this ).parent().find( 'li.active' ).removeClass( 'active' ); $( this ).addClass( 'active' ); }); });

in here using vue.js i can't do the active link on my div elements

here is my code for the elements on which i have to do the links active

<div class="conversion"> <div class="file has-text-centered icon-active-color" v-on:click="activeiconc"> <img src="../imgs/png.png"/> <h4>.PNG</h4> </div> <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc,}"> <img src="../imgs/pdf.png"/> <h4>.PDF</h4> </div> <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"> <img src="../imgs/jpg.png"/> <h4>.JPG</h4> </div> <div class="file has-text-centered" v-on:click="activeicon" v-bind:class="{ 'icon-active-color':activeiconc }"> <img src="../imgs/psd.png"/> <h4>.PSD</h4> </div> </div>

js

export default { components: { MainLayout }, data: function(){ return { logo: false, color:false, list:true, grid:false, deletebtn:false, isImageModalActive: false, activerow: false, activeiconc:false, } }, methods:{ showgrid:function(){ this.grid = true; this.list = false; }, showlist:function(){ this.list ^=true; this.grid = false }, showLogo:function(){ this.logo ^= true; this.color = false; this.deletebtn ^= true; this.activerow ^= true }, showColor:function(){ this.color ^= true; this.logo = false; }, activeicon:function(){ this.activeiconc ^= true; } } }

I'm building a vuejs component which accepts a prop by the name of idFieldType

Now I want this prop to accept only a Number Type or a String Type

So I wrote it as follows

idFieldType: { Type: Function, default: function() { return Number; }, validator: function() { if(value == String || value == Number) { return true; } return false; } }

I also tried replacing the type to Object.

My question is how can I write a prop that accepts only specific types ?

I have a model in which I'm initializing an array on ajax success after the model is mounted

var self = this; $.getJSON("somejson.json", function (data) { var list = []; list = data.list.map(function (item) { return { id: item.id, text: item.text }; }); self.selectableItems = list; });

I have a click method on each of these items which removes the item from selectableItems

select: function (item) { this.selectableItems.pop(item); },

selectableItems renders correctly initially, but when I mutate the array, the dom isn't updating. Although the actual array is being modified correctly.

I verified this by having a computed property that returns the count of selectableItems. This count is updated correctly when the item is removed, but the dom still shows the item.

I also noticed that when I hard code the value of selectableItems in the ajax, everything works as expected!

self.selectableItems = [{ id: 1, text: "adsad"}];

I'm aware of the caveats of array mutation in vue. But I feel I'm missing something basic here, as I have just started exploring Vue. Can someone point out on what I'm missing?

I'm building a Chrome extension using Vue, and currently I'm trying to inject some HTML into a webpage. This is the App.vue file I've built so far:

<script> import $ from 'jquery'; import OtherComponent from './components/OtherComponent'; export default { name: 'app', components: { 'other-component': OtherComponent, }, mounted() { $('body').append('<div>{other-component}<div>'); }, }; </script>

Obviously, the line $('body').append('<div>{other-component}<div>'); won't append other-component. I'm aware that other-component is generally used in the <template> of App.vue, but I need to do it from the JavaScript. Is there a way to make this work?

I am doing very simple page with url's switching. In one of url I need to call @click methods. Here is my code:

const NotFound = { template: '<p>Page not found</p>' } const Home = { template: '<p>home page</p>' } const Faq = { template: '<p>Faq page</p>' } const Book = { template: ` <div> <button @click="foo()">test</button> </div> ` } const routes = [ {path: '/', component: Home}, {path: '/book', component: Book}, {path: '/faq', component: Faq} ] const router = new VueRouter({ routes // short for `routes: routes` }) new Vue({ el: '#app', router, data: { }, methods: { foo() { console.log("ffffff"); } } })

But I am getting error: Property or method "foo" is not defined on the instance but referenced during render.

the result should be a paragraph contain a name and button to change this name from "adel" to "mohamed" but it is not working ,not showing any thing in the browser and i have console err is: "app.js:2 Uncaught SyntaxError: Unexpected identifier,

You are running Vue in development mode. Make sure to turn on production mode when deploying for production. See more tips at https://vuejs.org/guide/deployment.html "

//html code _______

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vue.js course</title> <link rel="stylesheet" href="./styles.css"> <script src="https://unpkg.com/vue"></script> </head> <body> <div id="vue-app-one"> <greeting></greeting> </div> <div id="vue-app-two"> <greeting></greeting> </div> <script src="./app.js"></script> </body> </html>

// app.js code_________

Vue.component('greeting', { template: "<h1>hello {{ name }}. <button v-on:click="chang">change name</button></h1>", data(){ return { name:"adel" } }, methods: { chang: function(){ this.name = 'mohamed'; } } }); var one = new Vue({ el: '#vue-app-one' }); var two = new Vue({ el: '#vue-app-two' });

I'm having issues with array reactivity, please see this example: https://jsfiddle.net/jk1kadxq/

var app = new Vue({ el: "#app", data: function () { return { grid: { rows: [{}] } } }, methods: { addRow: function () { this.grid.rows.push({}); }, setRow: function (row) { console.log(row); this.$set(row, 'cell', 'Test'); } }, watch: { 'grid.rows': { deep: true, handler: function (rows, oldRows) { console.log('Rows updated', rows, oldRows); } } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.js"></script> <div id="app"> <table> <tr v-for="row in grid.rows"> <td><input type="text" v-model="row.cell"></td> <td><button type="button" @click="setRow(row)">Set</button></td> </tr> </table> <button type="button" @click="addRow">Add</button> </div>

1. If a row has not been edited manually, clicking "Set" button sets the field to "Test" and all the further updates to it are catched in watcher.

2. If a row has been edited manually first, watcher is not triggered, and clicking "Set" button does not immediately update the field. Adding another row updates the current row.

Is there a different way to add new array members? This page says it's ok to just add: https://vuejs.org/v2/guide/list.html

I have a VueJs app with a Laravel backend as the API.

When running locally the app works as expected with https, however when on the production server I get the Requested an insecure XMLHttpRequest endpoint message.

My server is on Digital Ocean, has been setup with RunCloud and has SSL enabled through LetsEncrypt.

The application can be viewed here: https://vehicletrader.sweney.co/#/

Any advice would help.

I am watching one value and I computed another value.

Something like this:

computed: { modeText: function () { if(this.mode == 'create') return 'Create' else return 'Edit' } }, watch: { mode(val, old) { if(val == 'create') update modeText else update modeText }, },

How do I recompute the computed value when watched value updates?

thanks for reading this. I have two props in my component. I dont know why props "labelbtn" is displaying data correctly but "connected2" is not.

Vue.component( 'button-labels', { props : ['connected2', 'labelbtn' ], template : `<div class="button-container"><button class="button-app" v-for="label in labelbtn" v-on:click="clickHandler(label)" >{{label.label}}</button><button>{{connected2}}</button></div> `, destroyed : function(){ console.log(mySPINBridge);

},

methods : { clickHandler : function(label) { if (label.id === 1) { this.$emit('event_child', 'search-template') } }, }

})

new Vue({ el: '#app', data : { labels : [ { id : 1, label : "Search" } , { id : 2, label: "Categories" }, { id : 3, label: "Favorites" }, {id : 4, label: "Settings"} ], results : [], connected1 : "hi there", currentView : "button-labels",

},

this is from the main html file

<div id="app"> <component :is=currentView keep-alive :currView="currentView" :results='results' :labelbtn="labels" :connected2="connected1" v-on:event_child="eventChild"></component> </div>

While exploring the new Vuestic admin dashboard tool, I discovered a UI bug where the donut was oversized in relation to its containing element. I was trying to debug/fix it so I could submit a PR, but I ran into an odd CSS selector > * during debugging for the Vue Chart Base class which didn't quite make sense to me.

How I interpreted what > * would do in CSS: since > selector in CSS gets ALL children, and the * selector in CSS gets EVERY element on the page, I thought perhaps that using this selector means to get EVERY CHILD element.

When used in context of a Vue Component, I believe that CSS is scoped to that component, so is my interpretation correct, or am I mistaken?

I git cloned vue, cd'ed into one of the examples folder and ran npm install. Everything went fine, then I ran npm run dev and it gets stuck at this stage. Is there anything else I should do to run this locally?

npm run dev > vue@2.4.2 dev /vue > rollup -w -c build/config.js --environment TARGET:web-full-dev bundling... bundled in 2456ms. Watching for changes...

In the following code, clicking on the component emits a signal to the parent, who modifies its state online (in the sense - not via a handler):

Vue.component('my-component', { template: '<div v-on:click="emitit">click on the component</div>', methods: { emitit: function() { this.$emit('mysignal', 7) } } }) new Vue({ el: "#root", data: { from: 0 } }); <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> <div id="root"> <my-component v-on:mysignal="from=5"></my-component> from component: {{ from }} </div>

Is it possible to access the parameter provided via the $emit directly in v-on:mysignal="..."?

I know that I can use a handler defined in the main Vue component but I would like to simplify my code and avoid to have several handlers in methods.

i'm using this library to display a youtube player inside of a vue component. the player works great when i first load the component, but fails to play videos when component is destroyed and mounted again (that's what i think... ) in my site i use a router-view, when navigating to the player component the first time it works great, but if i go back to the home page and then forward again to the player component i get this error:

Cannot read property 'src' of null this is the full stack trace

www-widgetapi.js:121 Uncaught TypeError: Cannot read property 'src' of null at W.g.C (https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQKB5wA/www-widgetapi.js:121:84) at V (https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQKB5wA/www-widgetapi.js:113:99) at W.(anonymous function).getCurrentTime.Mb.(anonymous function) [as loadVideoById] (https://s.ytimg.com/yts/jsbin/www-widgetapi-vflQKB5wA/www-widgetapi.js:130:11) at VueComponent.play (eval at (http://localhost:8080/app.js:1037:1), :136:31) at VueComponent.boundFn [as play] (eval at (http://localhost:8080/app.js:729:1), :165:14) at Vue$3.eval (eval at (http://localhost:8080/app.js:1037:1), :73:18) at Vue$3.Vue.$emit (eval at (http://localhost:8080/app.js:729:1), :2207:16) at VueComponent.playSong (eval at (http://localhost:8080/app.js:1058:1), :123:73) at boundFn (eval at (http://localhost:8080/app.js:729:1), :165:14) at Proxy.invoker (eval at (http://localhost:8080/app.js:729:1), :1738:18)

the player seems to be fine, i only get this error when trying to play a video using the loadVideoById method

you can look at the error yourself in my site (WIP) https://mixtape-app.herokuapp.com/#/

1. create a new station
2. in the text input below the player you can search for youtube video, search 3. for a video and click on it in the search results to add it to the playlist, you can now click on it in the playlist to play it.
3. click the back button to go back to the main page.
4. now go forward again to return to the station you created.

trying to play the video again will produce the error.

i didn't post any code because it's just when calling loadVideoById, when i debug it seems that player is loaded and ready (not null), any ideas??

I am using Laravel 5.4 and Vue 2.4.2. I am rendering with v-for as following thanks to an axios returned array:

<div class="card" style="width: 20rem; margin-left:1rem;" v-for="ad in ads" v-cloak> <img v-if="ad.image1" class="card-img-top" :src="'/public/ads/' + ad.image1" alt="Image"> <img v-else class="card-img-top" src="/public/logo.png" alt="No Image"> <div class="card-block"> <h4 class="card-title">@{{ ad.title }}</h4> <p class="card-text"> @{{ ad.description }}<br><hr> <strong>$@{{ ad.cost }}</strong> </p> <a href="#" class="btn btn-primary">Contact us</a> </div> </div>

I've tried to use :src, v-attr:src and v-bind:src.

The information is being displayed successfully but the only that is not working is:

<img v-if="ad.image1" class="card-img-top" :src="'/public/ads/' + ad.image1" alt="Image">

This works great too:

<img v-else class="card-img-top" src="/public/logo.png" alt="No Image">

When I see the information loaded in the Developers Tools in Firefox I get the "No image" loaded great but there is a message when I hover the URL: "Cannot load the".

The weird thing is that if in Developer Tools I copy the URL from src attribute and paste it in the browser I can see the image correctly.

This is the generated element by Vue 2 according to Developer Tools:

<img src="/public/ads/hcpOW7aPhJFXWR8MP0poRfYYvmcRKjq2M6irUsD7.jpeg" alt="Imagen" class="card-img-top vjnhddxuzwlropukknbb">

And this is the generated element which is being displayed:

<img src="/public/logo.png" alt="No Imagen" class="card-img-top">

I'm really confused about how to implement server side sorting with Ag Grid while having pagination and infinite scrolling options. I have the following use cases specified for our application implementation of ag grid

• 5 page sizes (20, 50, 100, 200, All)
• All = grid height of 300 rows and infinite scrolling
• Each specific page size means we retrieve the # of items from our API call that is = to page size. So for example, a page size of 50, means each API call per page, retrieves 50 items.
• The above statement means that navigation to a new page of the grid = a new call to API to retrieve data

Based on all of this, I also need to implement server-side sorting. What I need to do, is the following

• User clicks a column header
• Header click triggers a function that calls our API with a sort parameter and returns results
• Grid refreshes with new (sorted) results

From what I've read so far, the two primary requirements are that sorting and enableServerSideSorting parameters are set to true. However I'm not sure what to do after that. Is it possible to modify the getRows ag grid callback, to call my API each time instead of the function looking only at cached results?

I'm just looking at what the conventional process is to handle a situation like this. Any help is appreciated and thank you in advance.

I have the following setup, trying to remove the activeNote from the notes array using DELETE_NOTE mutation. But it only removes the first element of the array.

the mutations.js is:

export const mutations = { DELETE_NOTE (state) { console.log(state.activeNote) // here the activeNote is the correctly selected note if (typeof state.notes !== 'undefined' && state.notes.length > 0) { state.notes.splice(state.activeNote, 1) // here no matter what the first element is removed if (state.notes.length === 0) { state.activeNote.text = '' state.activeNote.favorite = false } else { state.activeNote = state.notes[state.notes.length - 1] } } }, SET_ACTIVE_NOTE (state, note) { state.activeNote = note } }

the actions.js is:

export const actions = { deleteNote: ({ commit }) => commit('DELETE_NOTE'), updateActiveNote: ({ commit }, note) => commit('SET_ACTIVE_NOTE', note), }

the getters are:

const getters = { activeNote: state => state.activeNote, notes: state => state.notes, }

the component I call the mutation from is:

<template> <div id="toolbar"> <i @click="deleteNote" class="glyphicon glyphicon-remove"></i> </div> </template> <script> import { mapGetters, mapActions } from 'vuex' export default { name: 'toolbar', computed: mapGetters([ 'activeNote' ]), methods: mapActions([ 'deleteNote', ]) } </script>

In a standalone Vue.js script I can mix functions and Vue data:

var vm = new Vue ({ (...) data: { number: 0 } (...) }) function return100 () { return 100 } vm.number = return100()

I therefore have a Vue instance (vm) which data is directly addressable via vm.<a data variable>)

How does such an addressing works in a component, since no instance of Vue is explicitly instantiated?

// the component file <template> (...) </template> <script> function return100 () { return 100 } export default { data: function () { return { number: 0 } } } // here I would like to set number in data to what return100() // will return ??? = return100() </script>

I am using Vue.js with Nuxt.js, but I got a problem in router's functions.

In the pure Vue, i can write in main.js like this:

val route = new Router({ routes:{ [...] } }) route.beforeEach(to,from,next){ //do something to validate }

And how to do the same in nuxt.js ? I can not find any file like main.js.

Also, all i know is to deal with the pages folder to achieve router, I can not set the redirect path

please help, thx :)