Software

so in my code, I have a computed value today that allows me to access the current day, month and year, using the following code:

today: function() { var currentDate = new Date(); return { day: currentDate.getDate(), month: currentDate.getMonth(), year: currentDate.getFullYear() }; }

Now as far as my understanding goes, the difference between computed properties and methods is that computed props are cached and only recalculated if their dependencies (for example, a normal property) changed, while methods are fully calculated every time.

Now in my case, there are no dependencies. So, if on initialization, it's the 24th Dec 2017, late at night, and I access today.day a few minutes later when it's the 25th - will I be given the original value or will the value be recalculated?

Technically, no properties are dependencies of this computed property, so nothing changed. According to the following extract from the official guide, today.day should still equal 24.

However, the difference is that computed properties are cached based on their dependencies. A computed property will only re-evaluate when some of its dependencies have changed.

I'm building an app in Vue.js with rest api (server) is in Java.

I implemented Localization using https://kazupon.github.io/vue-i18n and it seems to work fine.

The problem i'm facing now is that when I'm getting data from the server (ie: list of cities) which have to be localizated also; I don't know which approach is better for this.

I thought of few options, having a db table like "id | name", (name has to be localized) the name value could be in json.

{"en": "English name"}, {"fr": "French name"}, {etc...}

Then in Vue.js I could apply list.map and filter by the current locale. But for making dynamic filtering on that set of data I'm kinda stuck.

Do you think that's a good approach? Would it be better to ask the server already in the current locale in each request?

Any ideas?

Thanks in advance!

I am trying to pass a class as a prop:

export default class ModelForm extends Vue { @Prop() model: Model item: Model = new this.model() }

This does not work and typescript wants me to pass the constructor instead of the class:

export default class ModelForm extends Vue { @Prop() modelConstructor: Function item: Model = new this.modelConstructor() }

Is there a way to pass the class itself and then instantiate it?

Hi!
I'm currently building a large scale VueJs Application and would like to set it up as a Multipage Application, where I have two different Sections (Admin + User), that I would like to load independently, yet share some Components and Services. How would I go about building this sort of Architecture, any Help would be appreciated.

Setting up multiple Webpack Entries as described here: (https://github.com/Plortinus/vue-multiple-pages) works for me but the Problem I'm now encountering is the Authentification since the Vuex Store is deleted on reload/redirect.

Did anyone come across this Problem in the Past? Thanks in Advance

I'm starting a new large-scale application and after hearing a lot about VueJS + Laravel combination i thought of using it. I followed Laracasts' Learn Vue 2: Step By Step series and some tutorials to understand how it works.

But have few questions in mind:

1. Why do we even need to use Vue with Laravel. I understand that we can create component like <user-profile></user-profile> in Vue, and then use it in Laravel Blade. But it looks like over-complication things? Firstly we pass data from controller to blade, and then further pass it to vue. Why do we need to do that?

2. Laravel and Vue both have their own routing system. Which one to use?

I'm new to vue.js and have this list of items:

<div class="jokes" v-for="joke in jokes"> <strong>{{joke.body}}</strong> <small>{{joke.upvotes}}</small> <button v-on:click="upvote"><i class="fa fa-arrow-up grey"></i></button> <div>

I want to toggle the grey to green when the upvote button is clicked.

in the methods I have:

methods: { upvote: function(joke) { joke.upvotes ++; //how to toggle grey to green here? } }

How can I achieve this? I have tried different tricks but all the tutorials change the class ALL of the items, not the one up-voted.

<img class="img-responsive" :src="'http://10.20.10.161:8000/content_images/'+video.image" >

In place of http://10.20.10.161:8000 I need some predefined variable as base url of my server application.

How can I set that?

This question already has an answer here:

• jQuery scroll to element 22 answers

I have this code:

<div class="container citiestop"> <div class="columns"> <a href="/{{$locale}}/contact#bcn" class="column is-4 citytop city-1-top red click-preloader" > <div id="tobcn">Barcelona.</div> </a> <a href="/{{$locale}}/contact#mad" class="column is-4 citytop city-2-top green click-preloader"> <div id="tomadrid">Madrid.</div> </a> <a href="/{{$locale}}/contact#mex" class="column is-4 citytop city-3-top blue click-preloader"> <div>@include('includes.trans',['es'=>'México', 'en'=>'Mexico']).</div> </a> </div> </div>

And in the bottom on the page I have 3 divs with ids: bcn, mad and mex.

I'm trying to do this with jQuery:

$('#tobcn').click = function () { $(document).scrollTo('#bcn'); }

When I click go to the URL of href but doesn't scroll.

What's wrong with the code? No error appears.

Thanks a lot, and if you need more information feel free to ask for it.

I have a problem with webpack not extracting CSS from vendor VUE components.

Html head looks like this

Vendor CSS is inserted as style tag after JS load at bottom.

Other styles in mine vue components, mine less files, styles from non-vue vendor packages are correctly splitted into main.css and vendor.css

Webpack config in Gist: https://gist.github.com/PanzerMarduk/50b66aba41364504570d9fe23b4f1535

What is missing from config ?

Thanx

I try to run a simple Vue.js, but I constantly receive the following error:

[Vue warn]: It seems you are using the standalone build of Vue.js in an environment with Content Security Policy that prohibits unsafe-eval. The template compiler cannot work in this environment. Consider relaxing the policy to allow unsafe-eval or pre-compiling your templates into render functions.

main.js:3180 [Vue warn]: Failed to generate render function: EvalError: Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script in the following Content Security Policy directive: "default-src 'self'". in

with(this){return _c('div',{attrs:{"id":"app"}})}

(found in )

Yet, I can't understand what is causing this error. I don't seem to use any dynamic templates and everything should be pre-compiled. Here is the code of my application:

import Vue from 'vue' import VueRouter from 'vue-router' const Home = Vue.component('home-component', { render() { return <div> <router-link to="/users">Users</router-link> <router-link to="/about">About</router-link> </div> } }) const Users = Vue.component('users-component', { render() { return <p>Users</p> } }) const NotFound = Vue.component('not-found-component', { render() { return <p>Not Found</p> } }) const routes = [ { path: '/', component: Home }, { path: '/users', component: Users } ] const router = new VueRouter({ routes }) const app = new Vue({ router }).$mount('#app')

And here is how I process JavaScript files in my gulpfile:

const paths = { main: 'web/javascript/src/main.js', allJs: 'web/javascript/**/*.{js,vue}', resultJs: 'public/assets/javascript/main.js', }; gulp.task('scripts', function() { return browserify(paths.main) .transform(babelify, { presets: ['es2015'], plugins: ["transform-runtime"] }) .transform(vueify) .bundle() .pipe(fs.createWriteStream(paths.resultJs)) }

There are seem to be many similar questions on StackOverflow, but none of them helped me.

I am using laravel and vue.js. When I do npm run dev my sass files are not compiling and they are not exist in /public. What can be the reason? I can not show code because of nda..

I'm building a small application in VueJs 2.0 where I'm having two select options with Select2 plugin as such:

<div class="form-group"><label class="col-sm-2 control-label">Categories:</label> <div class="col-sm-4"> <v-select multiple :options="selectTable" placeholder="Categories" v-model="categories"></v-select> </div> </div> <div class="hr-line-dashed"></div> <div class="form-group"><label class="col-sm-2 control-label">Sub-Categories:</label> <div class="col-sm-4"> <v-select multiple :options="selectSubtractedTable" placeholder="Subtracted Categories" v-model="subtractedCategories"></v-select> </div> </div>

Now I've a computed property to list these elements inside, like:

computed: { selectTable() { if(this.model) { return this.model.map(a => ({ value: a.id, label: a.name })); } }, selectSubtractedTable() { if(this.subModel) { return this.subModel.map(a => ({ value: a.id, label: a.name })); } } },

Now I'm having a watch function which checks the first list and remove the elements from the second list as:

watch: { categories(newValue) { this.subModel = this.model for(var i = 0; i<newValue.length; i++ ) { const element = this.subModel.find(a => a.id == newValue[i].value) console.log(element) if(element>0) this.subModel.splice(index, 1) } } }

I've data set in following format:

this.model = this.subModel = [ { "id":1,"name":"Jeans","created_at":null,"updated_at":null }, { "id":2,"name":"Shirts","created_at":null,"updated_at":null }, { "id":3,"name":"Top","created_at":null,"updated_at":null }, { "id":4,"name":"Women","created_at":null,"updated_at":null }, { "id":5,"name":"Men","created_at":null,"updated_at":null }, { "id":6,"name":"Jwellary","created_at":null,"updated_at":null } ]

and const element = this.subModel.find(a => a.id == newValue[i].value) this is always showing value 0 in the watch property

Help me out.

When the following component was inline, it was able to access rowData but as a referenced template it can't:

HTML: <div id="app"> <div> <row-component v-for="(row, index) in rows" :row-data="row" v-on:delete-row="deleteThisRow(index)"></row-component> </div> </div> <script id="theRow" type="x-template"> row component: {{rowData}} <button @click="$emit('delete-row')">Delete3</button> </script> JavaScript: Vue.component('row-component', { props: ["rowData"], template: '#theRow' }) new Vue({ el: '#app', data: { rows: ["line1", "line2", "line3", "line4", "line5"] }, methods: { deleteThisRow: function(index) { this.rows.splice(index, 1); } } })

How can I get the component to recognize rowData?

https://jsfiddle.net/edwardtanguay/k1tx3z1n/

I'm using javascript (vue js) and I'm trying to add a calendar that I can choose from it date and time, I'm using this one:

<span class="glyphicon glyphicon-calendar"></span>

but I can only choose date from the calendar,

I want something like the Enabled/Disabled Dates Bootstrap 3 Datepicker v4 Docs, which is this one:

<div class="container"> <div class="row"> <div class='col-sm-6'> <div class="form-group"> <div class='input-group date' id='datetimepicker5'> <input type='text' class="form-control" /> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> </div> </div> </div> <script type="text/javascript"> $(function () { $('#datetimepicker5').datetimepicker({ defaultDate: "11/1/2013", disabledDates: [ moment("12/25/2013"), new Date(2013, 11 - 1, 21), "11/22/2013 00:53" ] }); }); </script> </div>

But I can't use it since it uses jQuery and I don't want something with jQuery. Is it possible?

Thank you.

I have a categories array, which is loaded once (in created hook) and then it is static all the time. I render this array values in a component template.

<template> <ul> <li v-for="item in myArray">{{ item }}</li> </ul> </template>

My data property looks (it does not include myArray - I dont want reactive binding):

data() { return { someReactiveData: [1, 2, 3] }; }

My create hook:

created() { // ... this.myArray = ["value 1", "value 2"]; // ... }

Problem is, that Vue throw error - I cant use myArray in a template, because this variable is not created when the DOM is created - mounted.

So how to do this? Or where can be stored component constants?

Vue.js documentation describes the created and mounted events as follows:

created

Called synchronously after the instance is created. At this stage, the instance has finished processing the options which means the following have been set up: data observation, computed properties, methods, watch/event callbacks. However, the mounting phase has not been started, and the $el property will not be available yet.

mounted

Called after the instance has just been mounted where el is replaced by the newly created vm.$el. If the root instance is mounted to an in-document element, vm.$el will also be in-document when mounted is called.

This hook is not called during server-side rendering.

I understand the theory, but I have 2 questions regarding practice:

1. Is there any case where created would be used over mounted?
2. What can I use the created event for, in real-life (real-code) situation?

I have the SCRIPT1003: Expected ‘:’ error in IE11. I have installed vuejs over vue-cli tool. It worked until I have added vuex library to the package.json. My package.json dependencies are following:

"dependencies": { "axios": "^0.16.2", "babel-polyfill": "^6.26.0", "lodash": "^4.17.4", "rxjs": "^5.4.2", "vue": "^2.3.3", "vue-i18n": "^7.1.0", "vue-router": "^2.6.0", "vue-rx": "^3.3.0", "vuetify": "^0.14.11", "vuex": "^2.3.1", "vuex-persistedstate": "^2.0.0" }

As suggested on many other help forums I have tried using babel polyfill. My .babelrc file is like so:

{ "presets": [ ["env", { "modules": false, "targets": { "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] } }], "stage-2" ], "plugins": ["transform-runtime"], "env": { "test": { "presets": ["env", "stage-2"], "plugins": ["istanbul"] } } }

I have included the polyfill in the entry point in build/webpack.base.conf.js:

entry: { app: ['babel-polyfill', './src/main.js'] },

Unfortunately I am still getting the same error after all of this. Could you please help me how to make it work in IE11?

Thank you in advance.

Best regards,

Goran

enter image description here

I want use Vue to complete this function, when I click the buttons, input will show the result,and can mutiple,clicked button will highlighted

In my vue.js project, i use axios library to get a JSON data, and successful(1.ok could print json data: {...}). but when i use JSON.parse() method to turn data to a object, console print out a error(2.error), could you tell why?

axios.get('/data/cart.json') .then(response=> { // 1.ok console.log(response.data); // 2.error let data = JSON.parse(response.data); console.log(data); }) .catch(function(error){ console.log(error); });

This is console print out:

SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>) at axios.get.then.response (cart.js:19) at <anonymous>

I just installed easy-autocomplete library using npm install easy-autocomplete. Now I would use this in my .vue components. Since I am green in laravel and vue.js I don't know how to import it to use. Could I ask for your help?