Software

I have been having the most stressful time making this progress bar into a circle progress bar. I've tried using progressbar.js but that isn't helping me.

html

<div id="myProgress"> <div id="myBar" v-bind:style="{width: activewidth}">{{activewidth}} done</div> </div> <br>

js

moveBar: function () { let numLessons = 1 for (let i = 0; i < this.opts.lessonsArr.length; i++) { numLessons++ } // this.numComp is the percentage of the bar this.numComp = (numLessons % 5).toString() console.log('numLeft', this.numComp) // this.activewidth determines the % completed, so the green bar this.activewidth = (this.numComp * 20 + '%').toString() console.log('thiswidth', this.activewidth) }

css

#myProgress { width: 95%; background-color: grey; margin-left: auto; margin-right: auto; } #myBar { width: 30%; height: 20px; background-color: #2ecc71; text-align: center; /* To center it horizontally (if you want) */ line-height: 20px; /* To center it vertically */ color: white; }

what i have now: image of progress bar

this is in vuejs, and in a big project :( please help me do this in pure css (if possible)

I am new to vuejs, While writing one js code inside laravel framework, I am getting error :

[Vue warn]: Unknown custom element: <app> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

App.js

import Vue from 'vue' import Vcinfo from './Vcinfo.vue' import router from './router' const app = new Vue({ el: '#vcinfo', components: { Vcinfo }, template: '<app></app>', router })

please suggest what to do?

I am using vee-validate to validate the register form and i have made the code as follows,

<form @submit.prevent="signUp()"> <div class="form-group" :class="{'has-error': errors.has('register.mobile_number') }" > <input v-model="register.mobile_number" v-validate="register.mobile_number" data-vv-rules="required" class="form-control" type="number" placeholder="Mobile Number"> </div> <div class="form-group" :class="{'has-error': errors.has('register.email') }" > <input v-model="register.email" v-validate="register.email" class="form-control" type="email" data-vv-rules="required|email" placeholder="Email"> </div> <div class="form-group" :class="{'has-error': errors.has('register.password') }" > <input v-model="register.password" v-validate="register.password" name="password" data-vv-rules="required" class="form-control" type="password" placeholder="Password"> </div> <div class="form-group" :class="{'has-error': errors.has('register.confirm_password') }" > <input v-model="register.confirm_password" v-validate="register.confirm_password" name="confirm_password" data-vv-as="password" data-vv-rules="required|confirmed:password" class="form-control" type="password" placeholder="Confirm Password"> </div> <div class="modal-footer btn-center"> <button type="submit" class="btn btn-default">Sign Up</button> </div> </form>

And the script was:

export default { data() { return { register: { mobile_number: '', email: '', password: '', confirm_password: '', }, } }, methods: { signUp() { this.$validator.validateAll().then((result) => { }); axios.post(config.apiDomain+'/Home',this.register).then(response=>{ }); } }, }

And also imported vee-validate in main.js as,

import VeeValidate from 'vee-validate'; Vue.use(VeeValidate);

But if we enter anything inside the input box, it is throwing error as

Uncaught Error: [vee-validate] No such validator '12312321' exists.

Whatever thing i enter inside any of the input box, it is showing the same error. Kindly help me to resolve this issue.

I'm trying to use vue-i18n inside of functional component. How would that be included? I'm using most recent Vue 2.x and vue-i18n 7.x Thanks

I am pretty new to vue-cli, I am developing an app with electron and vue. I am using vue-cli and everything is working fine. But one of my requirements is too use lokijs to persist my data.

I have managed to import lokijs to my component but i would like it to be globally, also i want to save de lokijs db to a local file.

Do you have any hints for this requirements?

Here is my partial code:

<template> <div class="home-page"> <h1 class="title">{{ title }}</h1> <h2>{{ counter }}</h2> <icon class="beer-icon" name="beer"></icon> <button v-on:click="createDB()">Add 1</button> </div> </template> <script> import Loki from 'lokijs' export default { name: 'homePage', data () { return { title: 'Home Page', counter: 1 } }, created () { // alert('created') }, methods: { createDB () { let db = new Loki('example.db') var children = db.addCollection('children') // Insert a document: children.insert({ name: 'Sleipnir', legs: 8 }) let a = children.get(1) alert(a.name) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped lang="scss"> </style>

Hope my question is clear.

I'm using Vue.Draggable: https://github.com/SortableJS/Vue.Draggable

Fiddle: https://jsfiddle.net/o5pcLhhj/

I have two lists setup and the ability to drag between them. I've added an onAdd event to the second list so I can detect when something gets added to that list:

onAdd: function(evt) { console.log(evt.item); }

Now if I drag "John" or "Joao" to the 2nd list, the event is not correctly picking up the item that was dragged in. It seems to be off by one index. If I drag "Jean" in, it correctly picks up this item.

What am I doing wrong here?!

Fiddle: https://jsfiddle.net/o5pcLhhj/

Thank you in advance!!

In my Vue app, I am looping through an array of schools. Each school has a name, an array of teacher counts (one per grade), and an array of student counts (one per grade).

The following code works, but only because I am coding the <td>s manually.

new Vue({ el: '#app', data: { schools: [ { name: 'Lincoln', teachers: [3, 4, 1], students: [55, 42, 39] }, { name: 'Oak Grove', teachers: [1, 2, 1], students: [31, 36, 23] }, { name: 'Fairview', teachers: [1, 3, 2], students: [30, 26, 39] }, ], }, }); thead th, tbody td { text-align: center; } <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script> <table id="app" class="table"> <thead> <tr> <th rowspan="2"></th> <th colspan="2">Grade K</th> <th colspan="2">Grade 1</th> <th colspan="2">Grade 2</th> </tr> <tr> <th>Teachers</th> <th>Students</th> <th>Teachers</th> <th>Students</th> <th>Teachers</th> <th>Students</th> </tr> </thead> <tbody> <tr v-for="school in schools"> <th>{{ school.name }}</th> <td>{{ school.teachers[0] }}</td> <td>{{ school.students[0] }}</td> <td>{{ school.teachers[1] }}</td> <td>{{ school.students[1] }}</td> <td>{{ school.teachers[2] }}</td> <td>{{ school.students[2] }}</td> </tr> </tbody> </table>

Notice repeated lines:

<td>{{ school.teachers[x] }}</td> <td>{{ school.students[x] }}</td>

It is not too much of a problem on this simplified example. But in my real project, there are many more columns and sub-columns. Is there a way to do a repeating loop to display the <td>s?

I've tried another v-for loop, but since it's inside the <tr>, only <td> and <th> are allowed.

I use vuetifyjs for my html & css. One of it's components changes it's styling/behavior based on a custom directive (error || success || warning || info)

e.g.

<v-snackbar error></v-snackbar> <v-snackbar success></v-snackbar>

Is there a way to bind the directive to a data or computed value?

something like this:

<v-snackbar {{ type }}></v-snackbar>

I'm fairly new to vue.js but I couldn't seem to find a concrete answer for what I'm looking for but I also am new enough that I might have been looking right at the answer and not known it. So.

What I'm trying to do is create a 1 page application that tracks turns basically. It will:

1. takes user input on how many users are participating
2. ask for the names of all the users
3. use the names which I currently have saved in an array, to build user cards, just showing the name of each user.
4. You will click your name when your turn is over and the next persons card/button will 'raise' and then they click it, etc.

I'm currently having a hard time with that 3rd part. I need to figure out how I can pass this array of users to my other component's data object so I can use vue.js to loop and just spit the cards out.

initial-start.vue - template

<template lang="html"> <div> <div> <h1>How many users?</h1> <input type="number" id="myNumber" value="0"> <button v-on:click="getUsers">Submit</button> <app-area v-if="users > 0 && users < 5"></app-area> </div> </div> </template>

initial-start.vue - script

<script> export default { methods:{ getUsers(){ var counter = 0; var users = []; var x = document.getElementById("myNumber").value; if (x <= 0){ alert('Please choose a number greater than 0.'); }else if(x > 4){ alert('Maximum 4 users!'); }else{ alert('thank you for that.') } while(counter < x){ name = prompt('Please enter your names.'); users.push(name); counter++; } return users; } } } </script>

app-area.vue - template

<template lang="html"> <div> <h1>Turn: {{ turn }}</h1> <userCards></userCards> </div> </template>

app-area.vue - script

<script> export default { data() { return{ turn: 0, users: [] } }, props: ['users'] } </script>

The question is, "How do I get the array from the getUsers() function, into the app area where I would be able to loop like

<userCards v-for="user in users"></userCards>

and have a card/button for each person entered ?"

I'm trying to login user. When I send correct data

Vue.axios.post(context.state.userAuthLinks.login, { email: playload.email, password: playload.password })

it works fine, but when I try to post wrong data, vue app reload with

http://localhost:8080/?email=asd%40gmail.com&password=asdasdasd#/

also, I found stange thing. When I, for example, sing up new user with the same email, to get error, app does not reload... It happens not only with dev server. On product server the same error.

full method

loginUser(context, playload) { return new Promise((loginResolve, loginReject) => { Vue.axios.post(context.state.userAuthLinks.login, { email: playload.email, password: playload.password }).then(function(res) { loginResolve(res); context.commit('setUserId', res.data.userId); context.commit('setUserToken', res.data.id); context.commit('setUserAuthenticated', true); }).catch(function(error) { // here it don't stops with 'debugger' console.log(error); loginReject(error); }); }); },

Also, I have theese headers

Vue.axios.defaults.baseURL = 'http://localhost:3000'; Vue.axios.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';

I use axios with vue.js to fetch data as unlimited pagination. It works fine expect when there is no data to render:

fetchData() { this.loading = true this.page++; axios.get(this.BASE_URL + '/api/jokes/'+'?page='+this.page).then( response => this.jokes = response.data).catch(function (error) { console.log(error); });

I'm wondering how to stop rendering when we reached to the last page and there is no more data to display?

I've looked at the docs but could not find my answer.

I am using laravel 5.3 and vue 1.0.26 version and it is unable to load components into blade pages. It showing empty. I was just trying with given laravel example component.

If any body have solution please suggest.

my app-laravel.js file

require('./bootstrap'); Vue.component('example', require('./components/Example.vue')); const app = new Vue({ el: 'body' });

my blade page looks like

<div class="col-10 text-muted"> <example></example> </div>

and am using gulp which looks like

elixir(mix => { mix.sass('app.scss', 'public/css/app.min.css') .scripts([ '../../../node_modules/jquery/dist/jquery.min.js', 'libraries/datatables.responsive.js', 'libraries/datatables.responsive.bootstrap4.js', '../../../node_modules/vue/dist/vue.min.js', 'app.js', ], 'public/js/app.min.js'); });

i am building a dynamic table, passing the columns and rows from an input, i need to build the data that is edited inside it with contenteditable atribute.

So after i pass number rows and columns i can edit the cells inside the html table, after that i have a create input, and i need to somehow get the data inside like a matrix for example

like this: dataTable[0][0] = "John"

at the moment i can't get any data :/

I tried to associate a v-model to the current index, like this:

Here i pass my number of rows and columns:

<div class="col-md-2"> <input type="number" min="1" v-model="table.rows" class="form-control" id="rows"> </div> <label for="columns" class="control-label col-md-1">columns:</label> <div class="col-md-2"> <input type="number" min="1" v-model="table.cols" class="form-control" id="cols"> </div>

here i iterate over the number of rows and columns to create the editable

<table class="table table-responsive" style="background-color:lightGray"> <tbody> <tr v-for="(row,idx2) in tableRows"> <td v-model="table.colsArr[idx]" class="table-success" v-for="(col,idx) in tableCols" contenteditable="true">{{idx}}</td> </tr> </tbody> </table>

Finally i have the data structure where i try to create that matrix, i tried with a simple array without success:

d

ata() { return { table: { rows: 1, cols: 1, key: "Table", tableStyle: 1, colsArr:[] }, insert: 1, }

when i create the table i want to show the elements, nothing is inside at the moment :/

alert("HEY:",this.table.colsArr[0]);

I'm trying to implement unlimited scrolling with vue.js and MugenScroll

The code is like this:

<template> <div class="jokes" v-for="joke in jokes"> <strong>{{joke.body}}</strong> <small>{{joke.upvotes}}</small> <div> <mugen-scroll :handler="fetchData" :should-handle="!loading"> loading... </mugen-scroll> <template> ... data () { return { jokes:[], comments: [], id: '', loading: false, page: 0, url: '' } }, methods: { fetchData() { this.loading = true; this.page++; axios.get(this.BASE_URL + '/api/jokes/'+'?page='+this.page).then( response => this.jokes = response.data); //how to scroll to the top of the newly fetched data ? this.loading = false },

The infinite scrolling works but the issue is that after the first page being fetched, the browser then scrolls immediately to the second page, as the DOM remained at the bottom. So I need to move the scroll to the top to avoid new page being rendered by a slight move down. How can I acheive this?

I'm new to javascript development and I have a real project here. Let me describe:

1. There is a project, an Express (Node.js) server that has a /public/app folder
2. There is another project, a Vue.js app that has a /dist folder
3. In the Express /public/app folder is copypasted vue.js application (copied from another project from /dist folder)
4. Vue.js app runs at http://localhost:3000/app/#/

I've added some console.log() commands into a different files/places in a vue.js app code, for example:

app.ts

... import {store} from './store/store'; import {isBoolean} from 'util'; console.log('APP'); let router = new VueRouter({ routes: [ { path: '/', component: WelcomeComponent }, ...

or in component:

... import * as common from '../../../store/common'; import * as country from '../../../store/country'; console.log('COMPONENT'); @Component({ template: require('./template.html'), components: { 'layout': LayoutContent2, ...

and so on. But none of the console.log() messages are displayed in a browser console. Im sure that an app is builded and copied correctly. So why can't I see the messages in console?

My project is done in laravel and vue.js, i have a separate css style sheets and all styles sheets are gulped into a common css style sheet. and it renders on production. Just after the production only some styles are working and most of the styles are not working, I use fileZilla to upload.

and all ccustomizations and configurations perfectly done. I guess something goes wrong in npm production. in local machine all styles are perfectly working.

I found a similar question on stack overflow but nothing worked.

I have 2 inputs, called col and row which i can change and they are related to the columns and rows of a table.

I want to see that table and edit his content, at the moment i have a v-model that updates my data with the row and columns, and need to put that in my v-for for the table so the table should get automaticly updated.

The problem is that the table is not getting updated.

This is what i have:

<div class="col-md-2"> <input type="number" min="1" v-model="table.rows" class="form-control" id="rows"> </div> <label for="columns" class="control-label col-md-1">columns:</label> <div class="col-md-2"> <input type="number" min="1" v-model="table.cols" class="form-control" id="cols"> </div> <table class="table"> <tbody v-for="row in table.rows"> <tr> <td contenteditable="true">John</td> </tr> </tbody> </table> data() { return { table: { rows: 1, cols: 1, key: "Table", tableStyle: 1, }, insert: 1, } }

,

Any help?

Is there any way to have the selected items using vue-mulitiselect in vuejs and Laravel5.4 sorted by value. For example if I choose “node2” first than choose “node1” I want it to auto order/sort them like “node1 node2”.

Thanks

The first few times I make changes the dev server restarts rapidly. After that, there's a good chance it won't restart the first time I save a change.. I often have to insert code that will not compile at all to get it to recompile, then revert that change. It also starts taking longer and longer. It will say "5000ms" but in actuality it might take 20 seconds.

There's got to be something buggy about how webstorm works with a vue cli project's dev server.

When I write npm run dev it starts on http://localhost:8080

Is it possible run on http://testdomain.local/? (without port)