Software

Below is a sample of how I normally handle the data access layer. I was wondering how this would integrate with vuex. Should I use the same pattern and just refer to the repos from my actions? Or should the actions replace repository methods? Or any other best pratice?

abstract class BaseModel { id apiPath destroy() { console.log('DELETE', this.apiPath, this.id) } } class User extends BaseModel { static apiPath = '/user' name constructor(item) { super() this.id = item.id this.name = item.name } } class BlueprintApiRepository { model constructor(model) { this.model = model console.log(this.model) } create(name) { console.log('POST', this.model.apiPath, name) // API call let item = { id: Math.random(), name } // Item returned from REST API return new this.model(item) } getAll() { console.log('GET', this.model.apiPath) // API call let results = [{ id: 1, name: 'Michael' }, { id: 2, name: 'Berta' }] // returned from REST API return results.map(result => new this.model(result)) } } class UserRepository extends BlueprintApiRepository { constructor() { super(User) } someSpecificMethod() { console.log('GET', 'do some non blueprint api call') } static someSpecificStaticMethod() { console.log('GET', 'do some non blueprint api call') } } let userRepo = new UserRepository() let user = userRepo.create('Peter')

In my application some routes are just accessible for authenticated users.
When a unauthenticated user clicks on a link, for which he has to be signed in, he will be redirected to the login component.

If the user logs in successfully, I would like to redirect him to the URL he requested before he had to log in. However, there also should be a default route, in case the user did not request another URL before he logged in.

How can I achieve this using vue-router?

My code without redirect after login

router.beforeEach( (to, from, next) => { if(to.matched.some(record => record.meta.forVisitors)) { next() } else if(to.matched.some(record => record.meta.forAuth)) { if(!Vue.auth.isAuthenticated()) { next({ path: '/login' // Redirect to original path if specified }) } else { next() } } else { next() } } )

My login function in my login component

login() { var data = { client_id: 2, client_secret: '**************', grant_type: 'password', username: this.email, password: this.password } // send data this.$http.post('oauth/token', data) .then(response => { // authenticate the user this.$auth.setToken(response.body.access_token, response.body.expires_in + Date.now()) // redirect to route after successful login this.$router.push('/') })

I would be very thankful for any kind of help!

I am trying to make a password set and reset system on vuejs in which i am using vee-validate to validate wether password entered in both the input tag are same or not and they prevent submission if they aren't same. This is my code :

<template> <div> <form @submit.prevent="validateBeforeSubmit()"> <div class="input-group"> <div class="input-group-addon"> Enter Password </div> <div class="input-fields"> <input v-validate="'required'" name="password" type="password" class="form-control" placeholder="Password"> <input v-validate="'required|confirmed:password'" name="password_confirmation" type="password" class="form-control" placeholder="Password, Again" data-vv-as="password"> </div> </div> <div class="alert alert-danger" v-show="errors.any()"> <div v-if="errors.has('password')"> {{ errors.first('password') }} </div> <div v-if="errors.has('password_confirmation')"> {{ errors.first('password_confirmation') }} </div> </div> <button type="submit" class="btn btn-primary"> Validate! </button> </form> </div> </template> <script> export default{ name:'password', methods: { validateBeforeSubmit() { this.$validator .validateAll() .then(function(response) { // Validation success if response === true }) .catch(function(e) { // Catch errors }) } } } </script>

I want to check the input length in vue js. I have the function to check whether the user input is empty or space only with

if(!this.content || this.content.trim() === ''){ return }

Now i want to check the user input length. If less than 50 characters system will showing a alert. Any suggestion?

I would like to hava all tr as a router link in my table, but when I add this before tr, then every css from table disappear and my View looks bad. Is a possibility to do this better?

<table v-if="seenOrders" id="ordersTable" class="table"> <tr> <th>Numer zamówienia</th> <th>Imię</th> <th>Telefon</th> <th>Email</th> <th>Status</th> <th>Data zamówienia</th> </tr> <router-link to="/orderDetail" class="order-row" > <tr v-for="order in orders" v-on:click="details(order.id)"> <td>{{order.number}}</td> <td>{{order.client_name}}</td> <td>{{order.phone}}</td> <td>{{order.email}}</td> <td>{{order.actual_status}}</td> <td>{{order.order_date}}</td> </tr> </router-link> </table>

I am having a list of navbar menu items as like,

<div class="navbar navbar-default menu-top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a href="index.html" class="navbar-brand"><img src="images/logo.png" alt="logo"><span>Sd Residency</span></a> </div> <nav class="navbar-collapse collapse"> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Home</a></li> <li><a href="">Rooms</a></li> <li><a href="">Gallery</a></li> <li><a href="">Contact Us</a></li> <li><a href="" id="show-modal" @click="showModal = true">Sign In</a> </li> </ul> </nav> </div> </div>

In the above list, if i click on sign-in menu, a modal box needs to be displayed in which there should also be a sign up option in which if we click on sign up, a another modal box needs to be displayed..

For this, i have started with initial step of using @click,

<li><a href="" id="show-modal" @click="showModal = true">Sign In</a></li>

And,

<modal v-if="showModal" @close="showModal = false"> <h3 slot="header">Sign In</h3> </modal>

And also,

<script type="text/x-template" id="modal-template"> <transition name="modal"> <div class="modal-mask"> <div class="modal-wrapper"> <div class="modal-container"> <div class="modal-header"> <slot name="header"> default header </slot> </div> <div class="modal-body"> <slot name="body"> default body </slot> </div> <div class="modal-footer"> <slot name="footer"> default footer <button class="modal-default-button" @click="$emit('close')"> OK </button> </slot> </div> </div> </div> </div> </transition> </script>

Script,

export default { data(){ return{ showModal: false, } } }

and,

Vue.component('modal', { template: '#modal-template' }) new Vue({ el: '#app', data: { showModal: false } })

It is displaying only the <h3> that shows sign in displays if i click on sign in <a> tag and i am not getting modal box, I don't understand how to do it to get the modal box and i am sure i am wrong with this way. But dont know how to achieve. Kindly help me to achieve getting the modal box while clicking the sign in option.

The code like that:

document.getElementById('email').value = 'login'; document.getElementById('password').value = 'pwd'; document.getElementById('button').click();

does not work because Vue uses v-model value instead of value attribute. Is there a way to change input and model values via javascript in phantomjs?

Notes

1. Setting attribute v-model for those input do not solve the problem.

2. Using CSP-compliant-build is not possible, because I can not rebuild project from sources.

3. Any extension for chrome also can not be used because page is rendered via phantomjs

I have trouble with VueJS(or with my brains). Ok. I have vuejs-webpack project and this router:

import Vue from 'vue' import Router from 'vue-router' import Main from '@/components/Main' import CreateTravel from '@/components/CreateTravel' import TravelDetail from '@/components/TravelDetail' import Friends from '@/components/Friends' import UserTravels from '@/components/UserTravels' import User from '@/components/User' import Settings from '@/components/Settings' import UserActivate from '@/components/UserActivate' Vue.use(Router); export default new Router({ mode: 'history', routes: [ { path: '/user/activate/:secret', name: 'UserActivate', component: UserActivate }, { path: '/', name: 'Main', component: Main }, { path: "/create", name: "Create", component: CreateTravel }, { path: "/travel/:id", name: "Travel", component: TravelDetail }, { path: "/friends", name: "Friends", component: Friends }, { path: '/user/:id', name: 'User', component: User, children: [ { path: 'travels', name: 'UserTravels', component: UserTravels } ] }, { path: '/settings', name: 'Settings', component: Settings } ] })

And main.js:

// The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' import App from './App' import router from './router' import VeeValidate from 'vee-validate'; import VueResource from 'vue-resource'; Vue.use(VeeValidate); Vue.use(VueResource); Vue.config.productionTip = false; /* eslint-disable no-new */ new Vue({ el: '#app', router, template: '<App/>', components: {App} });

And when I redirect to some link I have 404. Example, after redirect on link http://localhost:8080/user/activate/73e7bcfa-a9d2-4d32-8ddc-697a82bf6363 from email I look "Cannot GET /user/activate/73e7bcfa-a9d2-4d32-8ddc-697a82bf6363". In console browser next:

361d711d-05ef-4c5e-944a-7e511ba104ab:1 GET http://localhost:8080/user/activate/361d711d-05ef-4c5e-944a-7e511ba104ab 404 (Not Found). Thanks for your help

A large amount of data (+-15 000 records) is loaded via AJAX which is then used to populate two arrays, one sorted by ID the other by a name. Both the arrays contains the same objects just ordered differently.

The data is displayed in a tree view but the hierarchy can be changed by the user. The tree is virtualised on the first level so only the records displayed + 50% is 'materialized' as vue components.

Supplying both of the arrays as data to a vue instance is very slow. I suspect vue.js is adding observers to the objects twice, or change notifications is sent multiple times, I don't really know.

So only one of the arrays is added to vue the other is used out of band.

Vue slows down the addition of elements to an array a lot. If the array is populated before it is bound to the vue instance it takes +-20s before the tree view is displayed. If I bind it before populating the arrays it takes about +-50s before the tree view becomes usable (the elements are displayed almost instantly). This could be because of notifications going for all these elements added.

1. Is there a way to add a second array with duplicate data so vue.js watches it for changes, but it doesn't slow vue down as much?

2. Is there a way to switch watching/notifications of temporarily so elements could be added to an array without the penalty, yet be 'watched' when notifications is switched back on?

I'm not sure that my reasoning behind the slowdowns is correct, so maybe my questions are misguided.

O another thing I need the arrays to be watched and only one of the properties of the elements.

I'm just starting to use GraphQL with Apollo and Vue, so it might be a "stupid" question but I can't figure how to do.

How can I do inside the same view, a query to fetch one object, and update it using a mutation

Let's say I have a simple schema

type Product { id: ID! title: String! description: String }

And a vue component

<script> // GraphQL query const ProductQuery = gql ` query($id: ID){ Product(id: $id) { id title description } } `; const UpdateProductQuery = gql ` mutation updateProduct($id: ID!, $title: String!, $description: String) { updateProduct( id: $id, title: $title, description: $description, ) { id } } `; export default { data() { return { Product: {}, }; }, apollo: { Product: { query: ProductQuery, variables() { id: 1234, }; }, }, methods: { updateProduct() { this.$apollo.mutate({ mutation: UpdateProductQuery, variables: { id: this.Product.id, title: this.Product.title, description: this.Product.description, }, }) } } }; </script>

Now how am I supposed to write the template part ? Can I link the Product object to a v-model inside an input ?

<template> <section> <input v-model="product.title"></input> <input v-model="product.description"></input> <button @click="updateProduct">Update</button> </section> </template>

Thanks for your help.

I created a project with npm and vuejs/vue-cli.

I imported the ESLint extension.

I have eslint entries in my package.json file.

Now when I format my code (right-click, Format Code), it completely disfigures my code.

What do I have to do to get vscode to format according to the ESLint rules?

But on the website, ESLint complains that everything is not formatted correctly, and so it is obviously installed and running in some sense:

I have a scrolltobottom() function that is run after every function is executed.

How can I refactor the code so that I don't need to type scrolltobottom() everywhere?

Preferably without using Jquery.

async function initBot () { let botui = BotUI('homepage-bot', { vue: Vue }) let scrolltobottom = () => { let ele = document.getElementById('botui') document.body.scrollTop = ele.clientHeight } await botui.message.bot({"Hello"}) await scrolltobottom() await botui.message.bot({"Do you like apple or orange?"}) await scrolltobottom() await botui.message.button({"Orange", "Apple"}) await scrolltobottom() }

I try to create a components and get its key for using in axios. Elements created, but I can't get a key. It's undefined

<div class="container" id="root"> <paddock is="paddock-item" v-for="paddock in paddocks" :key="paddock.key" class="paddock"> </paddock> </div> <script> var pItem = { props: ['key'], template: '<div :test="key"></div>', created: function() { console.log(key); } }; new Vue({ el: '#root', components: { 'paddock-item': pItem }, data: { paddocks: [ {key: 1}, {key: 2}, {key: 3}, {key: 4} ] } }) </script>

I try some variants, but no result - @key was empty.

I am Angular2/4 and Vue.js developer. Today, suddenly I was asked from my friend about meaning of props. She asked me what does props stands for in Angular. I couldn't give right answer, so What does props stands for in Javascript? Cheers!

I'm using Vue's single-file component spec (*.vue) for custom components in my application. Together with rollup and rollup-plugin-vue, I have observed the output in the DOM, for custom components I have written, to be composed of the equivalent html elements.

For example:

component-a.vue

<template> <span>Hello World</span> </template> <script> export default { name: 'component-a' }; </script>

component-b.vue

<template> <component-a></component-a> </template> <script> import ComponentA from './path/to/component-a.vue'; export default { name: 'component-b', components: { ComponentA } }; </script>

The above example, if component-a is added to the Vue mount component, will render to a the sum of the two component's template contents in the DOM, which in this case is simply a span element:

<span>Hello World<span>

Is it possible to achieve a rendered output in the DOM like the snippet below, such that custom elements' templates are represented in the DOM by tags which preserve their tag names?

<component-b> <component-a> <span>Hello World</span> </component-a> </component-b>

Vue.js version is: 2.x

Hi. i'm sending ajax request in vue js to other page and get it's source. this source contains vue.js syntax such as events, ... when this source added to property and property added to template, the ajax data source (that contains vue.js syntax) can not be render and can't works properly. for example template is:

<div id="app"> {{{ foo }}} </div>

and app.js is:

var app = new Vue({ el: '#app', data: { foo: 'bar' }, mounted(){ this.$http.get('/media').then(function(response){ data = response.body; Vue.set(app, 'foo', data); }); }, methods: { alertVideoLink: function(event){ alert(event.target.href); } } });

in the above app.js code, ajax request return this code (that is response.body):

<a href="/media/videos" @click.pevent.self="alertVideoLink(event)">Video Link</a>

but this link can't be render and can't works properly! i'm test the render method and some useful hints, but no way found. please help... Thanks

I have the following setup for my actions:

get1: ({commit}) => { //things this.get2(); //this is my question! }, get2: ({commit}) => { //things },

I want to be able to call one action from within another, so in this example I want to be able to call get2() from within get1(). Is this possible, and if so, how can I do it?

I am working on a project in .NET with MVC and Vue.js, at the moment of wanting to use the components I have to declare it as follows:

import Vue from 'vue'; import example from './components/example.vue' import equiposcrear from './components/equipos/crear.vue' import equipos from './components/equipos/index.vue' import cargardiesel from './components/equipos/cargarDiesel.vue' const app = new Vue({ el: '#app', components: { example, equiposcrear, equipos, cargardiesel } })

If i registered as Vue.component('equipos', require('./components/equipos/index.vue'));

At the moment i want to use send the error that the component is not registered

@{ ViewBag.Title = "Equipos"; Layout = "~/Views/Shared/_Layout.cshtml"; } <div id="app"> <equipos></equipos> </div>

What am i doing wrong?

I have the following setup for an action:

myAction: ({commit}) => { commit('mutation1'); commit('mutation2'); commit('mutation3'); },

The thing is, I need mutation1 to for sure run first (which it does most of the time) and I need mutation2 to only run if mutation1 succeeds, and so on for mutation3. Since calling a mutation won't return anything, I'm figuring there has to be a better way to do what I'm trying to do. Is there a best practice for calling multiple mutations that depend on the previous mutation to succeed?

I'm using vue in regular js files (not .vue) and inline templates. I got few components that are loaded depend on the subpage. What I wanted to do is to load some global vue variables and vue coponents and then dynamically, using jQuery load additional vue coponents script if some container (eg. #blog) has lenght > 0.

The issue is that Vue is throwing an error that it found the Vue tags but couldn't register the component.

Is there any way of loading dynamically the JS files? I got really big website with a lot of js files that I want to load only on specific subpages. It works perfectly for all jQuery libs but sadly not for Vue components.

Example component below:

Vue.component('blog-entries', { name: "blog-entries", template: require('js/vue/home/blog/blog.html').template, data: function () { return { blog_entries: [ ] } } });

and error:

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

(found in )

load script:

function loadScript(scriptName, callback) { if (!_arr[scriptName]) { _arr[scriptName] = true; var body = document.getElementsByTagName('body')[0]; var script = document.createElement('script'); script.type = 'text/javascript'; script.src = scriptName; // then bind the event to the callback function // there are several events for cross browser compatibility // script.onreadystatechange = callback; script.onload = callback; // fire the loading body.appendChild(script); } else if (callback) { callback(); } };