Software

I need to attach functions to element using directives. I want to do it with Vue method $on, but it's not working. When I do it with addEventListener, event.target.value gives me unchanged value after first input, second works correctly. How to fix it?

Example: jsfiddle.net rjeu8Lc1/1/

My App works just fine, if I put routes without childrens (nesting) but I tried to nest it just now and converted my routes to this: in routes.js

import alphabetsPage from './components/views/pages/alphabets.vue' import dictionaryPage from './components/views/pages/dictionary.vue' import numbersPage from './components/views/pages/numbers.vue' import LayoutView from './components/views/Layout.vue' const routes = [{ path: '/', name: 'Home', component: LayoutView, children: [{ path: 'basic', name: 'Basic', component: alphabetsPage, children: [{ path: 'alphabets', name: 'Aphabets', component: alphabetsPage }, { path: 'numbers', name: 'Numbers', component: numbersPage }] }] }] export default routes

If I go to / or click on route <router-link to="/basic/alphabets" tag="li"><a>numbers</a></router-link> I can see the alphabetsPage component, however if I go click on <router-link to="/basic/numbers" tag="li"><a>numbers</a></router-link> the route doesn't work. I have a numbersPage componet working.

This must be from the routes, because, if I don't use children and just define the path in routes as /basic/numbers or /basic/alphabets it works.

There exist any way in Vue js to make a sum between two interpolation values inside an html tag?

ex:

value1= 5 value2= 3

<span> {{value1}} + {{value2}}</span>

So I would like to know if its posible to obtain a third value rendered on the span tag adding the two values.

I am trying to perform unit test on vuex actions, using Mocha and Sinon

here is my action.spec.js

import actions from '@/vuex/actions' import * as types from '@/vuex/mutation_types' describe('actions.js', () => { var server, store, lists, successPut, successPost, successDelete successDelete = {'delete': true} successPost = {'post': true} successPut = {'put': true} beforeEach(() => { // mock shopping lists lists = [{ id: '1', title: 'Groceries' }, { id: '2', title: 'Clothes' }] // mock store commit and dispatch methods store = { commit: (method, data) => {}, dispatch: () => { return Promise.resolve() }, state: { shoppinglists: lists } } sinon.stub(store, 'commit') // mock server server = sinon.fakeServer.create() server.respondWith('GET', /shoppinglists/, xhr => { xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(lists)) }) server.respondWith('POST', /shoppinglists/, xhr => { xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(successPost)) }) server.respondWith('PUT', /shoppinglists/, xhr => { xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(successPut)) }) server.respondWith('DELETE', /shoppinglists/, xhr => { xhr.respond(200, {'Content-Type': 'application/json'}, JSON.stringify(successDelete)) }) server.autoRespond = true }) afterEach(() => { // restore stubs and server mock store.commit.restore() server.restore() }) describe('populateShoppingLists', () => { it('should call commit method with POPULATE_SHOPPING_LIST string parameter', done => { actions.populateShoppingLists(store).then(() => { expect(store.commit).to.have.been.calledWith(types.POPULATE_SHOPPING_LISTS, lists) done() }).catch(done) }) }) describe('changeTitle', () => { it('should call commit method with CHANGE_TITLE string', (done) => { let title = 'new title' actions.changeTitle(store, {title: title, id: '1'}).then(() => { expect(store.commit).to.have.been.calledWith(types.CHANGE_TITLE, {title: title, id: '1'}) done() }).catch(done) }) }) describe('updateList', () => { it('should return successful PUT response', (done) => { actions.updateList(store, '1').then((data) => { expect(data.data).to.eql(successPut) done() }).catch(done) }) }) describe('createShoppingList', () => { it('should return successful POST response', (done) => { let newList = { title: 'new list', id: '3' } actions.createShoppingList(store, newList).then((testResponse) => { console.log('testResponse: ', testResponse) expect(testResponse.body).to.eql(successPost) done() }).catch(done) }) }) })

here is my action.js

import { CHANGE_TITLE, POPULATE_SHOPPING_LISTS } from './mutation_types' import api from '../api' import getters from './getters' export default { populateShoppingLists: ({ commit }) => { return api.fetchShoppingLists().then(response => { commit(POPULATE_SHOPPING_LISTS, response.data) }) }, changeTitle: (store, data) => { store.commit(CHANGE_TITLE, data) return store.dispatch('updateList', data.id) }, updateList: (store, id) => { let shoppingList = getters.getListById(store.state, id) return api.updateShoppingList(shoppingList) }, createShoppingList: (store, shoppinglist) => { return api.addNewShoppingList(shoppinglist).then((actionResponse) => { console.log('actionResponse: ', actionResponse) store.dispatch('populateShoppingLists') }) }, }

running my unit tests , I have an issue with the createShoppingList test

console.log

actions.js populateShoppingLists ✓ should call commit method with POPULATE_SHOPPING_LIST string parameter changeTitle ✓ should call commit method with CHANGE_TITLE string updateList ✓ should return successful PUT response LOG LOG: 'actionResponse: ', Response{url: 'http://localhost:3000/shoppinglists', ok: true, status: 200, statusText: 'OK', headers: Headers{map: Object{Content-Type: ...}}, body: Object{post: true}, bodyText: '{"post":true}'} LOG LOG: 'testResponse: ', undefined createShoppingList ✗ should return successful POST response undefined is not an object (evaluating 'testResponse.body') webpack:///test/unit/specs/vuex/actions.spec.js:90:28 <- index.js:15508:28 webpack:///~/vue-resource/dist/vue-resource.es2015.js:151:0 <- index.js:17984:52 webpack:///~/vue/dist/vue.esm.js:701:0 <- index.js:3198:18 nextTickHandler@webpack:///~/vue/dist/vue.esm.js:648:0 <- index.js:3145:16

whicj indicates that in the createShoppingList action, the reponse is not sent back on the return, so expect(testResponse.body).to.eql(successPost) is not true...

what's wrong with my Promise handling in this case ?

thanks for feedback

I'm passing some dynamic data from a parent component to a child component using props . I'm displaying the child component and the script. So I would like to know how I can add myColor prop to total value and show it an render the result in a final value. I'm using Vue 2 and webpack.

<v-layout> <v-layout> <v-flex > <h3 >Total price:</h3> </v-flex> </v-layout> <v-layout> <v-flex <v-subheader> {{total}} {{myColor}} €</v-subheader> </v-flex> </v-layout> </v-layout> <script> export default { props: ['myColor'], data: () => ({ checked1: '', showCart: false, colors: [{ id: 1, name: "white", price: 2, checked: '', }, { id: 2, name: "black", price: 2.0, checked: '', }, { id: 3, name: "Grey", price: 2.25, checked: '', }, { id: 4, name: "Blue", price: 1.6, checked: '', }, { id: 5, name: "Red", price: 2.5, checked: '', }, { id: 6, name: "Yellow", price: 2.75, checked: '', }], }), computed: { total: function() { var total = 0; for (var i = 0; i < this.colors.length; i++) { if (this.colors[i].checked) { total += this.colors[i].price; } } return total; }, }, } </script>

I have a template tag with a v-if condition. I want to trigger a method when this condition is true. Something like:

<template v-if="condition"> {{ doit() }} //trigger method </template>

I want to call the doit method when condition is true. How can I do that?

I'm trying to make a simple multi-step form for my Rails 5 app using Vue.js. It's my first time using Vue so I am a bit stuck on how to make things work properly.

Right now I am trying to do the following:

1. Click a Next button and set the li elements from step 1 to step N to have a class active.
2. Click a Previous button and remove class active from step N.

Quite simple. Here's what I've got so far but I don't know where to go from here:

import Vue from 'vue/dist/vue.esm' document.addEventListener('DOMContentLoaded', () => { Vue.component('step-item', { props: ['step'], template: '<li :class="{active: isActive}">{{ step.text }}</li>', data: function() { return { isActive: true // Right now I set them all to true } } }) Vue.component('step-button', { props: ['name'], template: "<input :name='name' :value='name' @click='counter += 1' type='button' class='btn btn-secondary' />" }) const progress = new Vue({ el: '#vue-listing', data: { counter: 0, stepList: [ {id: 0, text: 'Basics'}, {id: 1, text: 'Location'}, {id: 2, text: 'Images'}, {id: 3, text: 'Other'} ] }, methods: { addProgress: function() {return true}, // todo delProgress: function() {return true} // todo } }) })

then I have my form

<div id="vue-listing"> <!-- Display the progress through the form --> <ul class="text-center" id="listing-progressbar"> <step-item v-for="item in stepList" :step="item" :key="item.id"></step-item> </ul> <fieldset> Step 1 <step-button name="Next"></step-button> </fieldset> <fieldset> Step 2 <step-button name="Previous"></step-button> <step-button name="Next"></step-button> </fieldset> </div>

Right now I'm stuck on how to get the next and previous buttons to add or remove active from the current step. Eventually I will also need to hide and display the <fieldset> elements depending on the step.

Any help is much appreciated!

Thanks

I have an array (feedListBox) which i assigned to my feeds object of data. When i update feedListBox array, Vue.js does not detect it. Therefore i use a fixFeedArray method in my script js file (myApp.fixFeedArray()). It works really fine, but i wonder if there is another way to do it without using any function in my script file. I mean automatically.

var myApp = new Vue({ el: '#my-App', data: { feeds: feedListBox, }, methods: { fixFeedArray: function fixFeedArray() { this.feeds = feedListBox; } } });

I'm still new to Vue, but I feel like I'm almost getting the hang of it.. I managed to create an app that could translate to different languages where the content was loaded from LANG.json files.. the problem was that whenever I changed to a new view then it would turn back to the original translation..

So I tried to integrate Vuex to my application, but I can't seem to get it to work..

I believe this is all the relevant code:

src/i18n/index.js

import Vue from 'vue' import VueI18n from 'vue-i18n' import store from './../store' Vue.use(VueI18n) export default new VueI18n({ locale: store.state.Language, messages: { 'en': require('./en.json'), 'cn': require('./cn.json') } })

src/store/index.js

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const actions = { changeLanguage: ({ commit }, data) => commit('changeLanguage', data) } const mutations = { changeLanguage (state, data) { this.state.Language = data.lang } } const getters = { getLanguage: state => state.Language } const state = { Language: 'en' } export default new Vuex.Store({ state, getters, actions, mutations })

src/main.js

[...] import store from './store' import i18n from './i18n' [...] new Vue({ el: '#app', router, store, i18n, render: h => h(App) })

src/components/randomfile.js

<template> [...] <button v-on:click="en">English</button> <button v-on:click="cn">Chinese</button> </template> <script> export default { name: 'navFooter', data () { return { } }, methods: { en: function () { console.log('change lang') this.$store.dispatch('changeLanguage', 'en') // this.$i18n.locale = 'en' }, cn: function () { this.$store.dispatch('changeLanguage', 'cn') // this.$i18n.locale = 'cn' } } } </script>

I'm guessing the problem is either related to this line: locale: store.state.Language, or because I'm doing something wrong with the dispatch, because in one of my views I write {{$store.state.Language}}, which renders to en on page load, but disappears after I click the buttons that call the methods for dispatching.

I call the translations with {{ $t('views.home.title') }} but I'm pretty sure that's still the way they should be called after integrating vuex (store), and the translations do appear as they should, they just don't update after clicking the buttons that dispatch changeLanguage.

Any help would be much appreciated

I'm having trouble populating an array in data(). I'm simply pulling from a users JSON object(10 users), which is the same structure as randomapi

<template> <div class='row'> <ul> <li v-for="u in users"> Name : {{u.name}} <br> Email: {{u.email}} </li> </ul> </div> </template>

When the data is received, i loop through and populate a resultsArray, when it finishes, the users[] is equal to the resultsArray

<script> export default { data() { return { users: [] } }, methods: { getUsers() { this.$http.get('./playground/users.json') .then(response => { return response.json() }) .then(data => { const resultArray = [] for(let key in data){ resultArray.push(data[key]) } this.users = resultArray console.log(this.users) }) } }, created(){ this.getUsers() } } </script>

It's printing the following: Name : Email:

I am building a spa in vuejs and I want to change the color of my text on the basis of data I recieved,if i get pending status it should be grey and if submitted then green and if rejected then red and so on.

I use Vuejs and I use workbox-webpack-plugin in order to make my site offline, I want to cache a folder which contains all my files (3 files) like picture below, but when I build my project(using Laravel-mix). The main.js (which contains everything of Vue) cannot be cached in service-woker.js. I tried some ways to fix that but those didn't work. Does anybody face this issue, do you have any solution, many thanks!

->>picture-description

In Quasar version 0.13 the way to do it was:

<router-link v-bind:to="'/myurladdress'" tag='button' class='primary'>Link-name</router-link>

In the docs of of Quasar version 0.14.2 I merely find that your write a function on the button click event..?!

https://vuejs.org/v2/examples/grid-component.html

Does anyone has a paginantion feature for the grid component example in VueJS website?

It's convenient to group data into nested object properties. By doing this, we don't have to collect properties from the data field into an entity for later use. As in the following example,

var demo = new Vue({ el: '#demo', data: { level1: { level2: { level3_1: 'Hello', level3_2: 'world' } } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script> <div id="demo"> <div class="person"> <h3>{{ level1.level2.level3_1 }}</h3> <p>{{ level1.level2.level3_2 }}</p> </div> </div>

However, it's really overkill having to type the "level1.level2" prefix in order to get to the level3_x field. It'll be very cumbersome if there're loads of level3 fields.

I wonder if there is any way that I can save the work for typing level1.level2 over and over again. Does the template have any syntax so that some section is under the scope of "level1.level2"? Does Vue provide any support so that in this case the prefix "level1.level2" is assumed?

I have developed an App based on vue.js using monaca, onsenUI and cordova. It works on my computer but when I send the project to my friend's computer, any change he made doesn't show after running monaca preview. Every dependencies and requirements are installed properly. Please help me out with the issue.

I have developed an app based on monaca, onsenUI and cordova. It works on my computer but when I send the project to my friend's computer, any change he made doesn't show after running monaca preview. Every dependencies and requirements are installed properly. Please help me out with the issue.

I am using nuxt.js.

Loads data from asyncData () of page component to axios.

async asyncData (context) { const name = context.route.params.name const response = await axios.get ('/ users /' + name) return { user: response.data.info } }

Navigate to when navigating to this page and the above code will work fine.

However, if you refresh (F5) on this page component,

const name = context.route.params.name

Gets the data in name.

const response = await axios.get ('/ users /' + name)

No parameter is passed in name.

That is, parameters are not passed to axios, and the server side does not receive param values.

To solve the above problem, the data was loaded from mounted () to axios.

Why does asyncData cause problems?

As we know, if we put <script> tag in the "el" vuejs, there will showing an error.. It's make me can't put any ads in vue el

For example:

new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) <script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"> {{ message }} <script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script> </div>

• Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

so is it impossible to put Ads in Vue el?

I am a backend developer and the frontend will be using Vue.js (not exist yet).

I am curious if standard restful API design already work nicely, or do I need special consideration when I am designing the API?