Software

I am building some logic ith 2 nested select box, basicly i load a json file and pass the data to an array in my vuejs component, the json contains the logic for the 2 select box for example for Business Developemnt i want to load in the second box Financial Proposal and Master Licence...:

{ "Business Development": [ { "text": "Financial Proposal", "key": 1 }, { "text": "Master Licence and Service Agreement", "key": 2 }, { "text": "Non-Disclosure Agreement", "key": 3 }, { "text": "Relatório de Missão", "key": 4 } ], "Configuration Management": [ { "text": "Configuration Management Plan", "key": 1 }, { "text": "Configuration Management Plan For Implementation Projects", "key": 2 }

I already accomplish something like that, the issue is that when i change the first select box, the second is empty at position 1, like this:

here is my code:

<template> <div class="row margin-above2 box"> <h3 class="text-center">Template</h3> <img width="70px" height="70px" class="img img-responsive" src="static/img/word.png"> <form class="box-body form-horizontal"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control" v-model="docData.documentType"> <option v-for="(item,index) in documentNested"> {{ index }} </option> </select> </div> </div> <div class="form-group"> <div class="col-sm-12"> <select class="form-control" v-model="docData.documentSelection"> <option v-for="(item,index) in documentNested[docData.documentType]">{{item.text}}</option> </select> </div> </div> </form> </div> </template> <script> import data from '../../interfaceData/documentType.json' import permissions from '../../interfaceData/permissions.json' export default { name: 'app', data () { return { checked: false, documentNested: data, permissions: permissions, listItems: [], documentData: [] } },

thank you! :)

As a beginner to vue.js I'm struggling with this problem for days. I know that there are few plugins for that:

vue-google-auth

and

vue-google-signin-button

and

vue-authenticate

But none of these come with good documentations, so my attempts to make use of them failed. I also could not find any tutorial on vue.js with OAuth2 authentication after extensive googling. So appreciate if someone could come up with a full working example or refer me to some complete code.

I'm using VeeValidate and works perfectly for English (which is default) however if I try to use any other language I'm getting an error saying "Property 'locale' does not exist on type 'Validator'."

Here is my code:

import VeeValidate from 'vee-validate'; import french from 'vee-validate/dist/locale/fr'; Vue.use(VeeValidate); @Component export default class TestTest extends Vue { locale: any; // I have tried locale: string='fr'; nextLocale() { return this.locale === 'en' ? 'French' : 'English'; } changeLocale() { this.locale = this.$validator.locale === 'fr' ? 'en' : 'fr'; this.$validator.setLocale(this.locale); } created() { this.$validator.updateDictionary({ fr: { messages: french.messages, } }) } // other none related code... }

Is there any way in vuex to stop a mutation after commit? For redux, if next is not called in middleware, then we can say that the action is stopped

I have a form with 1 input field that i want to shoot into the database. I am using Vue.

Template:

<form class="form-horizontal" @submit.prevent="submitBid"> <div class="form-group"> <label for="bid"></label> <input name="bid" type="text"> </div> <div class="form-group"> <input class="btn btn-success" type="submit" value="Bieden!"> </div> </form>

Component:

export default { props: ['veiling_id'], methods: { submitBid(event) { console.log(event); }, }, computed: { }, mounted(){ } }

How do i get the value of the input field inside submitBid function?

Any help is appreciated.

I'm kinda new to vuelidate, and everything works fine, except I have no clue how to run validation only when the button 'submit' has been clicked. Right now it marks touched field red when you start providing any input and I'd like it to wait with that till user wants to submit filled form.

Here's what I've got up to now:

Vue.use(window.vuelidate.default) const { required, minLength, sameAs } = window.validators new Vue({ el: "#app", data: { user: { login: '', password: '', repeatedPassword: '' } }, validations: { user: { login: { required, minLength: minLength(5) }, password: { required, minLength: minLength(8) }, repeatedPassword: { required, sameAs: sameAs('password') } } } }) input { border: 1px solid silver; border-radius: 4px; background: white; padding: 5px 10px; } .error { border-color: red; background: #FDD; } .error:focus { outline-color: #F99; } .valid { border-color: #5A5; background: #EFE; } .valid:focus { outline-color: #8E8; } <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vuelidate/dist/validators.min.js"></script> <script src="https://unpkg.com/vuelidate/dist/vuelidate.min.js"></script> `<div id="app"> <input type="text" placeholder="login" v-model="user.login" v-on:input="$v.user.login.$touch" v-bind:class="{error: $v.user.login.$error, valid: $v.user.login.$dirty && !$v.user.login.$invalid}"> <br/> <input type="password" placeholder="password" v-model="user.password" v-on:input="$v.user.password.$touch" v-bind:class="{error: $v.user.password.$error, valid: $v.user.password.$dirty && !$v.user.password.$invalid}"> <br/> <input type="password" placeholder="repeat password" v-model="user.repeatedPassword" v-on:input="$v.user.repeatedPassword.$touch" v-bind:class="{error: $v.user.repeatedPassword.$error, valid: $v.user.repeatedPassword.$dirty && !$v.user.repeatedPassword.$invalid}" > <button :disabled="$v.user.$error" @click="$v.user.$touch()"> Submit! </button> </div>`

Please, be gentle :D It's first time when I got courage to ask anything here ^^

I have the following code:

Vue.component('greeting', { template: `<h1>{{ greeting }}</h1>`, data: function () { return { greeting: app.text } }, }); var app = new Vue({ el: '.app', data: { text: 'Hello' }, methods: { changeText: function () { this.text = 'Goodbye' } } });

So when I call changeText method it changes text but greeting in the component is not updated. I didn't understand if I should use props, watcher or computed property in this case.

What does this vue.js code execute:

• beforeCreate
• created
• mounted

but not:

• beforeUpdate
• updated
• activated

https://jsfiddle.net/edwardtanguay/3hkdbuke

var vm = new Vue({ el: '#app', data: function() { return { message: 'This is a test.' } }, methods: { changeText: function() { this.message = 'changed'; } }, beforeCreate: function() { this.$nextTick(() => { console.log('in beforeCreate'); // gets here }); }, created: function() { this.$nextTick(() => { console.log('in created'); // gets here }); }, mounted: function() { this.$nextTick(() => { console.log('in mounted'); // gets here }); }, beforeUpdate: function() { this.$nextTick(() => { console.log('in beforeUpdate'); //DOESN'T GET HERE }); }, updated: function() { this.$nextTick(() => { console.log('in updated'); //DOESN'T GET HERE }); }, activated: function() { this.$nextTick(() => { console.log('in activated'); //DOESN'T GET HERE }); } });

Once I run npm run buildin my vue2 project,an error explained thatloaderUtils.getOptions is not a function.

After I cnpm install vue-loader vue-template-compiler loader-utils ,the following error occurred：

ERROR in Error: Child compilation failed: Module build failed: Error: A valid query string passed to parseQuery should b egin with '?' - parseQuery.js:13 Object.parseQuery [cg.test]/[_loader-utils@1.1.0@loader-utils]/lib/parseQuery.js:13:9 - Error: A valid query string passed to parseQuery should begin with '?' - compiler.js:76 [cg.test]/[html-webpack-plugin]/lib/compiler.js:76:16 - Compiler.js:296 Compiler.<anonymous> [cg.test]/[webpack]/lib/Compiler.js:296:10 - Compiler.js:499 [cg.test]/[webpack]/lib/Compiler.js:499:13 - Tapable.js:202 next [cg.test]/[tapable]/lib/Tapable.js:202:11 - CachePlugin.js:62 Compiler.<anonymous> [cg.test]/[webpack]/lib/CachePlugin.js:62:5 …… …… ERROR in ./src/main.js Module build failed: Error: A valid query string passed to parseQuery should begin with '?' at Object.parseQuery (D:\***\node_modules\_loader-utils@1.1.0@loader-utils\lib\parseQuery.js:13:9) at Object.module.exports (D:***\node_modules\_babel-loader@6.4.1@babel-loader\lib\index.js:104:35) Build complete. Tip: built files are meant to be served over an HTTP server. Opening index.html over file:// won't work.

I used to update the version of the babel-loader，vue-cli,vue-loader, vue-template-compiler,loader-utils,webpackornpm install,but none of them work.Does anybody know the problem?

I have the following setup:

1. Vue PWA starter
2. Vuex store
3. Persist plugin to have data available offline

The sw registers properly and also loads the cached files containing my vue app when offline. The problem: The data that's stored in the localStorage doesn't show up, although it is available in the localStorage.

In Chrome's Application tab I see the error An unknown error occured when fetching the script. There's no assigned line of code from the worker or anything else.

So right now I don't know whether the problem is my worker, the plugin or something else. Are there any good approaches to tackle such 'magic' problems?

BTW: I left the service worker as is from the Vue PWA starter.

Store initialisation if it helps:

const localStorageConfig = new VuexPersistence({ key: 'someAppCode', }); export default new Vuex.Store({ modules: { user, client, tours, }, plugins: [localStorageConfig.plugin], });

I am trying to create an 'add friend' button like facebook. When click this 'add friend' button it changes to 'friend request sent' button. I have tried following approach which doesn't work:

html:

<div v-for="(friend, index) in friends"> <div v-if="friend.sentRequest"> <button class='disabled'>Friend request sent</button> </div> <div v-else> <button @click="addFriend(friend)">Add friend</button> </div> </div>

script:

<script> export default { data() { return { friends: [], } }, methods: { addFriend(friend) { friend.sentRequest = true; } } } </script>

I need help to fix this. Thanks in advance.

I have bound an array events to a component tag <scheduler> containing events to fill in a scheduler app (dhtmlx scheduler). However, the DOM doesn't seeem to refresh itself when data is retrieved by the getEvents methods triggered when vue instance is created.

There is 2 vue files I work with: App.vue containing the main app component and the Scheduler.vue file containing the scheduler component.

The thing is that when I modify something in the Scheduler.vue file and save it, it correctly take the updated events array into account. Scheduler parse the data in the events prop when DOM is mounted in scheduler component.

Therefore is there something I can do to get the updated array ?

Here is the App.vue:

<template> <div id="app"> <div class="container"> <scheduler v-bind:events="events"></scheduler> </div> </div> </template> <script> import Scheduler from './components/Scheduler.vue'; import auth from './components/auth/index' import data from './components/data/index' export default { name: 'app', components: { Scheduler }, data() { return { eventsArr: [], events: this.eventsArr } }, created() { this.getEvents(); }, watch: { eventsArr: function(value) { console.log('updated'); } }, methods: { async getEvents() { try { const token = await auth.getToken(this); const thattoken = await auth.getThatToken(this, token); await data.getOgustData(this, token, '/calendar/events', 307310564, this.eventsArr); // return this.events; } catch (e) { console.log(e); } }, } } </script>

Here is Scheduler.vue:

<template lang="html"> <div ref="scheduler_here" class="dhx_cal_container" style='width:100%; height:700px;'> <div class="dhx_cal_navline"> <div class="dhx_cal_prev_button">&nbsp;</div> <div class="dhx_cal_next_button">&nbsp;</div> <div class="dhx_cal_today_button"></div> <div class="dhx_cal_date"></div> <div class="dhx_cal_tab" name="day_tab" style="right:204px;"></div> <div class="dhx_cal_tab" name="week_tab" style="right:140px;"></div> <div class="dhx_cal_tab" name="month_tab" style="right:76px;"></div> </div> <div class="dhx_cal_header"></div> <div class="dhx_cal_data"></div> </div> </template> <script> import 'dhtmlx-scheduler' import 'dhtmlx-scheduler/codebase/locale/locale_fr'; import 'dhtmlx-scheduler/codebase/ext/dhtmlxscheduler_readonly.js'; export default { name: 'scheduler', props: { eventsArr: { type: Array, default () { return [{ id: '', text: '', start_date: '', end_date: '', }] } }, events: [] }, mounted() { scheduler.config.xml_date = '%Y-%m-%d %H:%i'; // disable left buttons on lightbox scheduler.config.buttons_left = []; // enable cancel button on lightbox's right wing scheduler.config.buttons_right = ['dhx_cancel_btn']; // changing cancel button label scheduler.locale.labels['icon_cancel'] = 'Fermer'; // hide lightbox in month view scheduler.config.readonly_form = true; // hide select bar in day and week views scheduler.config.select = false; scheduler.config.lightbox.sections = [ { name: "description", height: 20, map_to: "text", type: "textarea", focus: true } ]; scheduler.init(this.$refs.scheduler_here, new Date(), 'month'); scheduler.parse(this.$props.events, 'json'); }, } </script> <style lang="css" scoped> @import "~dhtmlx-scheduler/codebase/dhtmlxscheduler.css"; </style>

I have navbar in laravel (+vue.js) as a blade.php. I want to have in this navbar variable like {{xyz}} and when I am going on another page I can set text in Vue.js or something like this. Can you help me?

i'am trying to passing param to nuxt-link (router-link vue) but it seems doesnt work. this is my snippet and folder structure

<nuxt-link :to="{path: '/post-detail', params: { id:idPost } }"> {{title}} </nuxt-link>

and this is the screenshot when i try to hovering a link

but when i using query its working

<nuxt-link :to="{path: '/post-detail', query: { id:idPost } }"> {{title}} </nuxt-link>

i just prefer to use param => /post-detail/1 .. can anyone solve this :(

Why does Nuxt call the server for so many times on a single route/ page?

Below is the example I tested from their express-template:

import express from 'express' import { Nuxt, Builder } from 'nuxt' import api from './api' const app = express() const host = process.env.HOST || '127.0.0.1' const port = process.env.PORT || 3000 app.set('port', port) app.use(function(req, res, next) { console.log(res.headersSent) // <-- pay attention here next() }) // Import API Routes app.use('/api', api) // Import and Set Nuxt.js options let config = require('../nuxt.config.js') config.dev = !(process.env.NODE_ENV === 'production') // Init Nuxt.js const nuxt = new Nuxt(config) // Build only in dev mode if (config.dev) { const builder = new Builder(nuxt) builder.build() } // Give nuxt middleware to express app.use(nuxt.render) // Listen the server app.listen(port, host) console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console

This route/page/index.vue will call the api/users:

import axios from '~/plugins/axios' export default { async asyncData () { let { data } = await axios.get('/api/users') return { users: data } }, head () { return { title: 'Users' } } }

I added a console.log in plugins/axios.js:

import * as axios from 'axios' let options = {} // The server-side needs a full url to works if (process.server) { options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}` console.log('express:' + options.baseURL) } export default axios.create(options)

When I run the app and access it on my browser at http://127.0.0.1:3000/:

In my terminal I get:

false express:http://localhost:3000 false false false false false false false false

As you can see that it has called api/users 8 times more after the first call.

Is it a bug in Nuxt?

If I removed app.use(nuxt.render) from server/index.js:

// Give nuxt middleware to express // app.use(nuxt.render)

And I access it at http://127.0.0.1:3000/ or http://127.0.0.1:3000/api/users, I get:

false

Just one call which is correct.

So, what is going on with Nuxt?

I am learning vuejs and I can't understand why this name is needed.

<template> </template> <script> export default { name: 'NotFound' } </script> <style> </style>

For example, you can see the source of the above code in this file https://github.com/misterGF/CoPilot/blob/master/src/components/404.vue the name does nothing but why do we need it.

I have several buttons on a page which are hooked to the same method webcamSendRequestButton

<button v-on:click="webcamSendRequestButton" value="0" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button> <button v-on:click="webcamSendRequestButton" value="1" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button> <button v-on:click="webcamSendRequestButton" value="2" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button> <button v-on:click="webcamSendRequestButton" value="3" type="button" class="webcam-send-request-button" :disabled="disabled">Verify</button>

and I am making an ajax call when the button is clicked. In jquery or JS it is pretty straightforward to get the value of button when clicked using $(this).val();

How do I fetch the value of the button when it is clicked in vue?

var app = new Vue({ el: '#my-div', methods: { webcamSendRequestButton: function() { const buttonValue = ??? // How do I fetch the value over here $.ajax({ url: "someurl", type: "POST", data: { value: buttonValue }, success: function (data) { // Omitted for brevity } }); } } });

I have successfully installed a vuetifyjs template using the command

vue init vuetifyjs/webpack-advanced

it was successfully installed but when I tried to use the command npm run dev I had the following error message:

C:\Users\Muse\Documents\vuetify>npm run dev

vuetify@1.0.0 dev C:\Users\Muse\Documents\vuetify

node build/dev-server.js

fs.js:1657 binding.lstat(baseLong);

^

Error: ENOENT: no such file or directory, lstat 'C:\Users\Muse\Documents\vuetify\test' at Object.realpathSync (fs.js:1657:15) at resolve (C:\Users\Muse\Documents\vuetify\build\webpack.base.conf.js:8:13) at Object. (C:\Users\Muse\Documents\vuetify\build\webpack.base.conf.js:35:35) at Module._compile (module.js:573:30) at Object.Module._extensions..js (module.js:584:10) at Module.load (module.js:507:32) at tryModuleLoad (module.js:470:12) at Function.Module._load (module.js:462:3) at Module.require (module.js:517:17) at require (internal/module.js:11:18) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! vuetify@1.0.0 dev: node build/dev-server.js npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the vuetify@1.0.0 dev script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\Muse\AppData\Roaming\npm-cache_logs\2017-08-31T09_19_06_701Z-debug.log

I am building a dynamic table on my front end side, and at the end i need to know what was inserted on each cell of my table since it is editable, so i did this on my html:

<table class="table table-responsive"> <tbody> <tr v-for="(row,idx1) in tableRows" :class="{headerRowDefault: checkHeader(idx1)}"> <td class="table-success" v-for="(col,idx2) in tableCols"><input v-model="items[idx1][idx2]" type="text" class="borderTbl" value="HEY"/></td> </tr> </tbody> </table>

as you guys can see. i set inside the input a v-model with items[idx1][idx2] so i can pass the value to that line and columns, it is not working like this, i don't know how to set it.

This is my javascript:

export default { name: 'app', data () { return { table: { rows: 1, cols: 1, key: 'Table', tableStyle: 1, caption: '', colx: [] }, hasHeader: true, hasCaption: true, insert: 1, idx2: 1, items: [] } },

computed: {

tableStyles () { return this.$store.getters.getTableStyles }, tableRows () { return parseInt(this.table.rows) }, tableCols () { return parseInt(this.table.cols) }

expected items array:

items:[ ["john","Micheal"] ["john","Micheal"] ["john","Micheal"] ["john","Micheal"] ]

I have the following Popper.js popup in which I have a button on which I want to attach a Vue.js click event.

However, while the click event works outside the popup, it doesn't work instead the popup.

How can I get changeText() to work inside the popup as well?

https://jsfiddle.net/edwardtanguay/jxs5nmxs

HTML: <div id="app"> <div> Message: {{message}} </div> <div> <button @click="changeText()">outside works</button> </div> <hr/> <a href="#" id="example" class="btn btn-primary" rel="popover" data-original-title="Test Form" data-content=' <div class="form-group"> <label for="exampleInputPassword1">Name</label> <input type="text" class="form-control"> </div> <button @click="changeText()" class="btn btn-success">Submit</button> '>Fill out form</a> </div> JavaScript: var vm = new Vue({ el: '#app', data: function() { return { message: 'hello' } }, methods: { changeText: function() { alert('test'); } } }); $(function () { $('#example').popover({html: true}); });