Software

Difference between the created and mounted events

Vuejs - Tue, 2017-08-22 11:07

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?
Categories: Software

IE11 + Vue-Cli + Webpack + Babel - SCRIPT1003 Error

Vuejs - Tue, 2017-08-22 10:26

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

Categories: Software

how to use vue to complete this function? [on hold]

Vuejs - Tue, 2017-08-22 10:19

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

Categories: Software

JSON.parse() can not turn string to object, and print out SyntaxError: Unexpected token o in JSON

Vuejs - Tue, 2017-08-22 10:00

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>
Categories: Software

laravel vue.js - using items from node modules folder

Vuejs - Tue, 2017-08-22 09:37

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?

Categories: Software

File to import not found

Vuejs - Tue, 2017-08-22 07:48

So I'm trying to import my SCSS file with all vars and mixins definitions to all components I have. File name for defs is _defs.scss:

@import "styles/defs";

I also used alias in webpack to define where to look for styles folder:

resolve: { alias: { 'vue$': 'vue/dist/vue.esm.js', assets: path.resolve(__dirname, "src/assets/"), styles: path.resolve(__dirname, "src/styles/") } }

But for some reason webpack still throws error telling he can't find the import file.

Where am I wrong?

Categories: Software

Computed properties on function instances

Vuejs - Tue, 2017-08-22 07:41

In knockout.js I was able to do the following:

function Person() { this.firstName = ko.observable('Foo') this.lastName = ko.observable('Bar') this.fullName = ko.pureComputed(() => { return this.firstName() + this.lastName() }) } var p = new Person() console.log(p.fullName()) // FooBar

Is there any way to add reactive computed properties on objects which are not a component data in Vue?

Categories: Software

Checkbox selection through number of counts in array in VueJs/Javascript

Vuejs - Tue, 2017-08-22 07:35

I'm building a small application in Vuejs where I'm having a list of year presented in a table something like this:

<tr v-for="model in yearsTable"> <td class="text-left"> <div class="i-checks"> <label> <input type="checkbox" :value="model.id" :checked="model.active" @click="yearCheck(model)"> <i></i>{{ model.name }}</label> </div> </td> </tr>

and a computed property to have the data something like this:

computed: { yearsTable: function () { if(this.yearModel) { return this.yearModel.map(d=> ({name: d.name, id: d.id, active: d.is_active ? true : false})) } } }

I've a function in which I want to check the is_active count and I want to have only 3 to be checked at a time. I mean if more than 3 is checked then it should alert so I have a method function something like this:

yearCheck(model) { var count = 0; var ele = this.yearModel.findIndex(t => t === model) if(ele.is_active = 0) { ele.is_active = 1 } else { ele.is_active = 0 } for(var j=0; j<this.yearModel.length; j++) { if(this.yearModel[j].is_active === 1) { count++; } } if(count>3) { ele.is_active = 0 alert('You already have 3 selected years') } else { //Do other function } }

I'm getting an error of:

Uncaught TypeError: Cannot create property 'is_active' on number '-1'

Categories: Software

Cannot clear radio button Vue js

Vuejs - Tue, 2017-08-22 06:10

I have this three components - main, question, and questionOption. What I want is to clear the checked radio button on the questionOption from the main component startNewGame method. When I'am only using Main component resetting the radio button is just simple. I just assign the model to an empty array. Can someone help me on this. By the way, Im using onsen ui for the customize tags ans removed some unnecessary methods and data. Here is my code.

Main.vue

<div class="quiz-background"> <question v-for="(question, $indexParent) in randomQuestions" :question="question['doc'].question" :choices="question['doc']['choices']" :indexParent="$indexParent" :correctAnswer="question['doc'].correctAnswer" @collectedAnswer="pushToAnswers" > </question> <section style="margin:16px"> <v-ons-button modifier="cta" @click="submit" v-show="!isDone" >Submit </v-ons-button> </section> </div> <script> export default { data() { return { dialogVisible: false, resultDialogVisible: false, questionnaires: [], chosenAnswers: [], correct: [], total: 0, isDone: false } }, methods: { pushToAnswers(answer) { this.chosenAnswers.push(answer); }, submit() { //will compare chosenAnswers to correct answer } }, startNewGame() { //will reset answered questions this.getQuestionaire(); this.chosenAnswers = []; this.resultDialogVisible = false; this.total = 0; this.isDone = false; }, components: { Question } } </script>

Question.vue

<question-option v-for="(choice, key, $index) in choices" :choice="choice" :indexParent="indexParent" :index="$index" :letter="key" :name="'question-' + indexParent" v-model="selectedValue" @change="changeValue" > </question-option> <script> import QuestionOption from './QuestionOption.vue'; export default { data() { return { selectedValue: '' } }, props: ['question', 'indexParent', 'choices', 'chosenAnswer'], methods: { changeValue(newValue) { this.selectedValue = newValue; this.$emit('collectedAnswer', this.selectedValue); } }, components: { QuestionOption } }

Question.vue

<v-ons-list-item :modifier="longdivider" :key="letter" tappable > <label class="left"> <v-ons-radio :name="name" :input-id="indexParent + '-' + index" v-model="chosenAnswer" > </v-ons-radio> </label> <label class="center" :for="indexParent + '-' + index" > {{ letter }} . {{ choice }} </label> </v-ons-list-item> <script> export default { props: ['choice', 'indexParent', 'index', 'name', 'letter'], computed: { chosenAnswer: { get() { return this.letter; }, set() { this.$emit('change', this.letter); } } } } </script>
Categories: Software

How to use v-on:change in VueJS and send the parameter to get update JSON data with axios

Vuejs - Tue, 2017-08-22 06:06

Please see my code that I'am not sure what I'm doing wrong?. I want to get new JSON data when the id="select1" has changed and then send the parameter to id="select2" and then id="select2" will be show data in option.

var appZone = new Vue({ el: '#el', data() { return { options: [], list:[], selected:'' } }, mounted() { var self = this axios.get('https://www.iam-tour.com/wp-json/tour-api/v1/search/0') .then(function (response) { console.log(response); self.options = response.data; }) .catch(function (error) { console.log(error); }); }, methods: { onChange: function (){ axios.get('https://www.iam-tour.com/wp-json/tour-api/v1/search/'+this.selected) .then(function (response) { //console.log(response); self.list = response.data; console.log(list) }) .catch(function (error) { console.log(error); }); } } }) <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <div id="el"> <select id="select1" v-model="selected" class="custom-select" v-on:change="onChange" > <option v-for="item in options" v-bind:value="item.id" > {{ item.title }} </option> </select> <span>Selected: {{ selected }}</span> <select id="select2" class="custom-select" > <option v-for="data in list" v-bind:value="data.country_id">{{ data.title }}</option> </select> </div>

Categories: Software

Automatically log out user when token is invalidated

Vuejs - Tue, 2017-08-22 05:24

I have a SPA that is built on vuejs. When a user is logged in via API, the token is stored in local storage.

I need a global solution which will logout and prompt the user when the token is no longer valid. At the moment, I get "invalid token" error when accessing private API endpoints.

How do I rig axios so that ALL response of invalid tokens will trigger the logout/prompt code?

Categories: Software

How to run Vue.js dev serve with https?

Vuejs - Tue, 2017-08-22 01:57

I'm using Vue-cli to create vue project with webpack template. how to run it with https in development using: npm run dev?

Categories: Software

Vue attach PDF file in form

Vuejs - Tue, 2017-08-22 00:42

I have a form right now I built in vue. The issue I am having is that when I attach the file I can console out the atachement and see its an object but using vue tools its just listed as file.

Template

<input class="file-input" type="file" @change="onFileChange">

Method

onFileChange(e) { var files = e.target.files || e.dataTransfer.files; if (!files.length) return; this.form.resume = files[0]; console.log(files[0]); },

Then the Vue inspector: enter image description here

Categories: Software

Vue.js not updating automatically

Vuejs - Mon, 2017-08-21 22:12

I have got this in my html code

<div class="pl_wrapper"> <div class="options_pl"> <input type="button" @click="optionButtonClicked" class="option_button_pl" value="List"> <input type="button" @click="optionButtonClicked" class="option_button_pl" value="Add a language"> </div> {{show2}} </div>

And this in my vue.js

const ProgrammingLanguages = new Vue({ el:".pl_wrapper", data:{ name: "aa", show1: false, show2: false }, methods: { optionButtonClicked(){ var indexOfClicked = index(event.target,event.target.className); var equalIndexOfDiv = getOnIndex(indexOfClicked,"pl_divs") $(".options_pl").hide(); show1 = (indexOfClicked==0) ? true : false show2 = (indexOfClicked==1) ? true : false } } });

Now when i click option_button_pl i expect {{show2}}'s to also change from false to true and vice versa.But alas that doesn't Jsfiddle: happen.https://jsfiddle.net/3akfzcyf/

Categories: Software

Vue resource - dynamically determine http method

Vuejs - Mon, 2017-08-21 21:39

I would like to dynamically determine the appropriate http method and make a single api call. However an exception is thrown when I call the method.

I expect that I am doing something wrong rather than this being a vue-resource bug. Would anyone have any advice? Thanks

For example:

let method = this.$http.post if (this.model.id) { method = this.$http.put } method( this.url, this.model, options ).then(response => { this.$router.push(this.redirect_to) }).catch(response => { console.log(`Error: ${response.statusText}`) })

A javascript TypeError is thrown with message "this is not a function"

The code below works, but a bit long winded.

if (this.model.id) { this.$http.put( this.url, this.model, options ).then(response => { this.$router.push(this.redirect_to) }).catch(response => { console.log(`Error: ${response.statusText}`) }) } else { this.$http.post( this.url, this.model, options ).then(response => { this.$router.push(this.redirect_to) }).catch(response => { console.log(`Error: ${response.statusText}`) }) }
Categories: Software

I can't bind image source in v-for loop | vue.js, node.js

Vuejs - Mon, 2017-08-21 21:38

I try to bind image source in my v-for loop. My array is filled by functions and isn't static.

My code looks that:

<section class="section"> <div class="container"> <div v-for="match in matches" class="card"> <img :src="match.avatar" alt=""> </div> </div> </section>

And

created() { ipcRenderer.send('get:all:champions') ipcRenderer.send('summoner:recent:matches:request') ipcRenderer.on('summoner:recent:matches:response', (event, matches) => { matches.splice(-15, 15) // -15, 15 this.matches = matches for (let match in matches) { ipcRenderer.send('matches:champion:avatar:request', { element: match, championId: matches[match].champion }) } ipcRenderer.on('matches:champion:avatar:response', (event, data) => { this.matches[data.element].avatar = data.avatar }) }) }

I get error in console and any pic doesn't show. Error:

(node:9696) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 42): Error: Request failed with status code 429

I hope you can help me =)

Categories: Software

vuejs directive based on variable

Vuejs - Mon, 2017-08-21 21:29

Is it possible to dynamically assign a directive? I would like to assign success or error based on a variable named type. I currently do this (Which I would like to replace):

v-snackbar(v-if="type === 'success'", success, timeout=3000, bottom=true, right=true, v-model='snackbar') {{ snackbarText }} v-btn(flat, @click.native="snackbar = false") v-icon close v-snackbar(v-if="type === 'error'", error, timeout=3000, bottom=true, right=true, v-model='snackbar') {{ snackbarText }} v-btn(flat, @click.native="snackbar = false") v-icon close
Categories: Software

How to replace a string value using Vue.js mixins?

Vuejs - Mon, 2017-08-21 20:41

I have created a mixins file called as urlMixin.js as show below,

module.exports = { data() { return { url: 'http://localhost:3000' }; } }

I have a component called as profile.vue in which I have imported the mixin file. The profile.vue file looks like this,

import axios from 'axios'; import urlMixin from './../../mixins/urlMixin'; export default{ data() { return{ } }, created: function(){ }, mixins : [ urlMixin ], methods:{ getInfo: function(){ axios.get('this.url/profile') .then(response =>{ }) .catch(e => { this.errors.push(e); }) } } }

I want to be able to replace the url value in the Profile.vue with the url value present in urlMixin.js file, like how it is shown in the profile.vue file. Is there a way using which I can achieve this?

Categories: Software

Bind the properties of a form generated dynamically

Vuejs - Mon, 2017-08-21 19:25

How do I bind the properties of a form that is generated dynamically?

<div class="form-group" v-for="col in colInfo"> <template v-if="col.Type == 'text'"> <label class="badge badge-info">{{col.Field}}</label> <textarea class="form-control form-control-md" rows="3" v-on:change="updateInsertMap(col.Field)"></textarea> </template> <template v-else> <label class="badge badge-info">{{col.Field}}</label> <input type="text" class="form-control form-control-md" v:on:change="updateInsertMap(col.Field)"> </template> </div>

When the submit button is clicked, I need to get all the values before sending it to the server? How could I keep track of the values?

Categories: Software

Vue js app is not defined inside the app

Vuejs - Mon, 2017-08-21 18:45

I have included vue 1.0.18 min.js in a script tag in the html page.

The specialText line doesn't work.

var tagApp; window.onload = function () { /* Vue Js App here */ tagApp = new Vue({ el: '#app', data: { title: 'Title', chars: [{ name: "Jarred", attack: 15, health: 70, special: "Block", blockVal: 5, specialText: "Passive: Blocks "+ tagApp.chars[0].blockVal +" Damage." // line above: here it doesn't work // gives: "can't get chars of undefined" }, { name: "John" }] } }); // close app alert(tagApp.chars[0].blockVal); // here it works getBlockVal(); // here it also works } // close window.onload function getBlockVal() { var arr = [{ name: "henry", description: "blocks " + tagApp.chars[0].blockVal + " dmg." }]; alert(arr[0].description); }

I've also tried the following inside of specialText:

this.blockVal gives undefined.

this.parent.blockVal gives undefined.

this.chars[0].blockVal says chars is undefined.

tagApp.chars[0].blockVal says tagApp is undefined.

Please help.

Categories: Software

Pages