Software
vue.js2 console err is "app.js:2 Uncaught SyntaxError: Unexpected identifier"
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' });Array Reactivity Issues
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>
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.
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
VueJS Requested an insecure XMLHttpRequest endpoint
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.
watching one value, computing the other one, how to update computed value when watched changes
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?
One prop is not displaying its data in VueJS
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>What does the CSS Selector > * do from within a Vue.js component?
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?
How to run the official vue.js examples?
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...Is it possible to use online an $emitted parameter?
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.
vue-youtube-embed Cannot read property 'src' of null
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/#/
- create a new station
- 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.
- click the back button to go back to the main page.
- 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??
Vue 2 Image :src not working with Laravel
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">ag grid server side sorting with pagination
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.
Vuex is only removing the first element
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>How to address the data of a component from within that component?
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>how to write global router-function in nuxt.js
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 :)
What should be on 'this' on 'destroyed' hook for VueJS Component?
I am working on a medium-sized app and notice a lot of memory increase when moving back and forth between components.
I put this on the component:
destroyed(){ console.log(this }I was surprised to find a lot - if not all - the 'data' still there plus computed properties. I thought this was supposed to be clean at that point. What all should be expected to be destroyed by that point? Is this a cause for concern and a potential source of memory leaks?
mysql stored value displayed as raw html in vue through php
I have a value stored as < b > supposed to be bold < /b > in mysql.
while fetching through php I used nearly all html entity related functions but no avail
//will be returned as json for vue $item ['value'] = $fetched_data;in vue template I use like this
{{$value}}and it gives me as html tags where I am supposed to print the bolded text, anything should I do in PHP or Vue to make this happen?
vuex "store" vs "data: store" in Vue() constructor, which is best?
Vue docs mention to use "data" option on constructor, to keep global/shared data: https://vuejs.org/v2/guide/state-management.html
This makes sense.
Vuex docs passes the "store" object, without a property name though: https://github.com/vuejs/vuex/blob/dev/examples/counter/app.js
new Vue({ el: '#app', store, render: h => h(Counter) })Shouldn't that have been
new Vue({ el: '#app', data: store, render: h => h(Counter) })?
Other examples pass it as "store: store" https://ypereirareis.github.io/blog/2017/04/25/vuejs-two-way-data-binding-state-management-vuex-strict-mode/
but "store" isn't a documented property: https://vuejs.org/v2/api/
How to retrieve data from vue component in another component?
There is a vue royter
..... const Edit = Vue.component('edit', require('./components/pages/edit.vue')); const Product_category = Vue.component('home', require('./components/pages/product_categories.vue')); const routes = [ ........ { path: '/product_categories', name: 'product_categories', component: Product_category }, { path: '/product_categories/edit/:id', name: 'product_categories_edit', components: {default: Edit, entity: Product_category}, props: {default: true, entity: true} } ];How can I get data in component Product_category componate Edit?
<script> export default { props: ['id', 'entity'], mounted: function () { console.log('Admin edit page mounted.'); console.log(this.entity); // Eror console.log(entity); // Eror this.getData(); }, } </script>A direct appeal is not suitable, because each router will have its own entity.
multiple $http.get calls must update row as they come
I have a table that holds information from multiple sources (websites). Each row is a different source. The user can refresh the data for each individual row/source/website by clicking a refresh icon, or, the user can update ALL rows by clicking the refresh icon in the header row.
I would like to have each row update as the data comes when the user clicks on the refresh ALL icon in the header row.
This actually works fine, but the table does not update until all requests are finished. I would like it to update as they come. There's a cool bounce animation when the data changes, so, it would look really great if each row would come in as the data arrives. I had it working once by fluke (rows updating at random when ajax call is done) but I lost that day of coding (thanks to my github poor practices)
Anyway, here's how I structured things currently. It does update the table but only when every single row is complete.
So it basically does the $http.get call for all websites, then it does the .then for all websites...I would rather each call process through to .then when it's finished (oh yeah, I can see ther esponse in the console but it still waits for all of them before sequentially going on to .then foreach one) here's relevant code.
vuejs laravel spark (which uses $http.get) laravel 5.3.31
...
Vue.component('websites', { // props: [''], /** * The components data */ data() { return { userLbProfiles: [], spin_icon_many: false, showRefreshButton: '', refreshTime: '', busy: '', changeStatus: '', }; }, /** * Bootstrap the component . */ mounted() { var self = this; this.fetchLastRefreshTime(); this.getData(); this.busy = false; this.showRefreshButton = true; }, /** * Component's methods */ methods: { /** * get current stored data from the DB * * @return response */ getData() { this.changeStatus = true; this.$http.get('/get/all/userLbProfiles') .then(function (response) { console.log(response); this.userLbProfiles = response.data; this.busy = false; this.spin_icon_many = false; this.changeStatus = false; }) }, /** * get only ONE row from the DB * * @return response */ getDataForOne(userLbProfileId, i) { this.changeStatus = true; this.$http.get('/get/one/userLbProfile/'+userLbProfileId) .then(function (response) { console.log(response); this.userLbProfiles[i] = response.data; console.log(this.userLbProfiles[i]+'number: '+i); this.busy = false; this.userLbProfiles[i].spin_icon = false; this.changeStatus = false; }) }, /** * Call the api to log into one website and fetch the live data * */ refreshOne(userLbProfileId,i) { this.userLbProfiles[i].spin_icon= true; this.busy = true; this.$http.get('/get/refresh/one'+userLbProfileId) .then(function (response) { console.log(response); this.getDataForOne(userLbProfileId,i); // this.getData(); }) }, /** * Call the api to log into and update the specified # of websites * next in the list * */ refreshMany() { this.spin_icon_many = true; this.busy = true; for(i=0; i <= this.userLbProfiles.length-83; i++) { this.userLbProfiles[i].spin_icon= true; this.$http.get('/get/refresh/many'+this.userLbProfiles[i].id) .then(function (response) { console.log('got response after fetching refresh data for: '+this.userLbProfiles[i].id); console.log(response); }); } }, <get-website-data inline-template> <div class="panel panel-default"> <div class="panel-body"> <div class="row"> <div class="col-md-12"> <form class="form-horizontal" role="form"> <table class="table table-hover"> <tr> <th>Data Item 1</th> <th>Data Item 2</th> <th> <form> <a href="" @click.prevent="refreshMany()"> <i v-if="spin_icon_many" class="fa fa-fw fa-refresh fa-spin fa-2x"> </i> <i v-else class="fa fa-fw fa-refresh fa-2x"> </i> </a> </form> --> <i class="fa fa-fw fa-refresh fa-2x"> </th> <th>Last Update</th> </tr> <tr v-for="(userLbProfile, index) in userLbProfiles"> <td> @{{ dataItem1 }} </td> <td> @{{ dataItem2 }} </td> etc..
What happens with this code is that (obviously) the for loop runs out before I get any response, so the behaviour is
If there's 10 websites, let's say, 10 ajax calls go out but the first .then doesn't process until ALL 10 are finished, even if I can see the response in the console.. it just waits for all the others. I would think .then would process individual for that response, but somehow they all know about each other? Probably the for loop?
Anyway, then getData runs 10 times and all the data is loaded in the table.... 10 times... the last call's data is what sticks obv.
I tried experimenting with isolating code into functions, thinking that might make each asynch call independent somehow (I think that s how I got to fluke work that one time) but no luck.
I also tried calling getDataForOne thinking it might update the row and trick it into updating right away, but I didn't get vue to recognize the data changed (maybe this is the right route to take?)
It would be really difficult to return the data within the same call because of the multi-step process used to get the live data from the website. It almost has to be a separate call to the DB (almost)
Any help is greatly appreciated this has been an ongoing issue for weeks now.
How to maintain a VueJS app and how to update it on live server?
I have a general question to which I can not find an answer. I am new to Javascript apps and frameworks. Let's say that you have a website that is live and running, then when you need to fix bugs or make improvements you can connect to FTP get the files you need to change and upload them back. What about VueJs framework, Angularjs etc., if it must be "built" (compiled) before you can use it on a live server (ex. Apache), how do you maintain such project?