Software

I'm creating a vuejs app. And I want to add the ability for third-party non-vue js scripts to send commands or data to my app. For example

window.app = new Vue({}) app.setTitle = 'Hello'

Of course I want to expose only certain methods and triggers.

Ok, so first, let me explain that I've researched this extensively and am completely aware of the security implications. This is a client-side app using JavaScript, Vue, and pure HTML5.

I use a hidden input type file to get the file dialog.

<input id="image-input" class="hidden" type="file" accept="image/*" @change="imageFileSelected"> <button type="button" title="Change Image" @click="openImage"><img src="icons/open-image.png"></button>

You can ignore the fact that I'm using Vue because these are just the native onclick and onchange events. The problem applies to HTML5 in general. The button triggers the hidden file input just fine in Firefox, Edge, and Chrome. However, I noticed a problem with the later two, which is that the onchange event is not fired when you select the same file twice.

I've already seen the millions of other topics suggesting value = null. That solution works perfectly fine, except for one small trivial detail. Firefox will remember the last file that you uploaded and automatically select it, hence adding this fix for Chrome and Edge, breaks that desirable functionality that's present in Firefox. The reason I want the dialog to remember the last file is because of the nature of app itself. I expect that users may want to work on one of the files and then decide to start over by reloading the same file again.

openImage() { var el = document.getElementById('image-input'); el.value = null; el.click(); },

Other apps that exhibit this same issue:

1. http://blueimp.github.io/jQuery-File-Upload/
2. https://rowanwins.github.io/vue-dropzone/dist/index.html
3. https://fineuploader.com/demos.html

It seems nobody else is aware of this or else just doesn't care about whether their dialogs remember the last selected file. Regardless, does anyone know a way to fix this problem without breaking the Firefox functionality I find desirable?

Sorry guys I am new to node.js and was wondering whether we are allowed to use vue.js within an ejs file.

I have a vue template that contains a form:

<form id="logout-form" :action="href" method="POST" style="display: none;"> {{ csrf_field() }} </form>

In laravel, forms must have a csrf_field() defined. But within a vue component, the statement {{ csrf_field() }} means that I have a method named csrf_field in my vue instance and I am calling it.

How do I add csrf_field under this circumstance?

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">