Software

I want to see all errors for one field. But it always show me the first one. enter image description here

I want to do transition on my three elements. My text should change to another and my A elements should fade. How to do it correctly?

<transition name="fade"> <div> {{text}} <div v-if="show"> <a @click="show = !show" href="#"></a> <a @click="show = !show" href="#"></a> </div> </div> </transition>

I’m currently working in Vue.js & Laravel (php framework) and I’m using “multiselect”, I’m trying to use it with objects from my database ( I get them with axios). My multiselect works but this happens :

My currently page And I would like only one “denmark” option but when I choose it it show me all the application related to “denmark”.

I used this example : https://gist.github.com/superlloyd/c1ea010a63dade8f3d14948296ac8646#comments1

Do you have any ideas ? :slight_smile:

Thank you.

I'm new in Vue Js and not sure how to do the following task.

I have a list of items and it should work like the following: If one item from the list is clicked, other items in the list should disappear. How should I do this in Vue.js?

I try to access router in my typescript class component:

import {Vue} from 'vue-property-decorator' import Component from 'nuxt-class-component' import {Getter, Action} from 'vuex-class' @Component export default class Login extends Vue { @Action login username = '' password = '' async submit () { await this.login({username: this.username, password: this.password}) this.$router.push('/results') } }

Unfortunately, I get:

error TS2339: Property '$router' does not exist on type 'Login'.

I want to load state from localstorage in an action: However I get store.replaceState is not a function.

loadState (store) { let stateJson = localStorage.getItem('vuex') if(stateJson) { let state = JSON.parse(stateJson) store.replaceState(state) } }

I am using http://vuematerial.io/#/getting-started in my vue project (webpack, hot reloads, babel and so on).

I've imported this library (via npm) and included it in main.js file hovewer i don't see any changes in my project. The browser doesnt render it.

What am i doing wrong?

main.js:

import Vue from 'vue' import VueMaterial from 'vue-material' import 'vue-material/dist/vue-material' import App from './App.vue' Vue.use(VueMaterial) Vue.material.registerTheme('default', { primary: 'blue', accent: 'red', warn: 'red', background: 'grey' }) /* eslint-disable no-new */ new Vue({ el: 'body' components: { App }, render: h => h(App) })

App.vue:

<template> <div id="app"> <hello></hello> <md-button>Default</md-button> // this doesnt work! </div> </template> <script> export default { components: { 'hello': Hello, 'documents': Documents, 'Home': Home }, data: function () { return { } } } </script>

Im trying to change the propData passed into a component to monitor and check the component.

Im expecting the last console log in this code block to be 5 but its still 2.

import Vue from 'vue'; import test from 'ava'; import AnimateNumber from './../src/components/AnimateNumber.vue'; function instance(propsData) { let N = Vue.extend(AnimateNumber); return new N({propsData}); } test('..', t => { let vm2 = new Vue({ data: { a: 2 } }); let vm = instance({number: vm2.a}).$mount(); // vm.displayNumber is just a copy of the number prop passed in. console.log(vm.displayNumber); // 2 // Set to 5 Vue.set(vm2, 'a', 5); console.log(vm2.a); // 5 Vue.nextTick(function () { console.log(vm.displayNumber); // 2 (Expected 5) }); });

I am trying to build a Single Page Application (SPA) using VueJS as a front-end and Laravel as a back-end.
I am using laravel's passport to manage the authentication tokens etc.
The problem: After login I have to reload the page to be successfully authenticated.

Login method

data() { return { email: '', password: '', } }, methods: { 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.$store.dispatch({ type: 'authenticate', token: response.body.access_token, expiration: response.body.expires_in + Date.now() }) // redirect after successful login if (this.$route.query.from) this.$router.push(this.$route.query.from) else this.$router.push('/feed') }) } }

Get the user information from the backend (just works after refreshing the page)

setUser () { // this route throws 'unauthenticated' error // and works only after refreshing the page this.$http.get('api/users/') .then(response => { this.$store.dispatch({ type: 'setUser', id: response.body.id, email: response.body.email, name: response.body.name }) }) } }

Vuex store

export default new Vuex.Store({ state: { isAuth: !!localStorage.getItem('token'), user: { id: localStorage.getItem('id'), email: localStorage.getItem('email'), name: localStorage.getItem('name') } }, getters: { isLoggedIn(state) { return state.isAuth }, getUser(state) { return state.user } }, mutations: { authenticate(state, { token, expiration }) { localStorage.setItem('token', token) localStorage.setItem('expiration', expiration) state.isAuth = true }, setUser(state, { id, email, name }) { localStorage.setItem('id', id) localStorage.setItem('email', email) localStorage.setItem('name', name) state.user.id = id state.user.email = email state.user.name = name } }, actions: { authenticate: ({ commit }, { token, expiration }) => commit('authenticate', { token, expiration }), setUser: ({ commit }, { id, email, name }) => commit('setUser', { id, email, name }) } })

Laravel route

Route::group(['middleware' => 'auth:api'], function() { Route::get('/users', 'UsersController@users'); });

Laravel function

public function users(Request $request) { return $request->user(); }

The error message


When I reload the page the error message disappears and I am successfully authenticated. I would be very happy for any kind of help!

I want to redirect the user if he is not logged in via middleware (The current user is first loaded from localstorage)

auth.js

export default async function ({ store, redirect }) { if(!store.state.stateLoaded) { await store.dispatch('loadState') } if (!store.state.user) { redirect('login') } } }

This works fine when I navigate between routes, but not when I initially load the page.

I'm studying VueJs and as programming allows multiple ways to get to the same result (some more or less elegant)...I'm pondering on what is the best way to filter lists.

Here are a few ways i've noticed lists could be filtered:

I will refer to this new Vue instance:

new Vue({ el: '#app', data() { return { selected:['diesel','petrol'], cars: [ { "color": "blue", "type": "diesel", }, { "color": "red", "type": "petrol", }, { "color": "blue", "type": "diesel", }, ] } }

Method #1: the "v-show". Where any car type pushed into the "selected" array will be rendered.

<div id="app> <span v-for="(car, key) in cars" v-show="selected.includes(car.type)" > {{car.color}} <br> {{joke.type}} <br> </span> </div>

Method #2: Using a computered Property and a filter

<div id="app> <span v-for="(car, key) in filteredCars"> {{car.color}} <br> {{joke.type}} <br> </span> </div> computed: { filteredCars: function(){ var selected = this.selected return this.cars.filter(function(car){ if (selected.indexOf(car.type) >= 0) { return joke.type } } )} }

Any thoughts and best practices??

Thanks again.

I have navbar blade, component with text and another components with page. It works like I have component with text in navbar, and another component after navbar. That's three another components. How to change text from for example index.vue in text.vue?

That's what I have:

Text.vue:

<template> <p class="title">{{msg}}</p> </template> <script> export default { props: [ 'msg', ], } </script>

Component in navbar.blade.php:

<title></title>

And I try to change it in index.vue, that should work when we are on this page:

data() { return { msg: 'text', }

But it doesn't work. How to do it correctly?

Two equal examples (according to Vue.js) work differently:

First

<input v-model="value" @input.once="setDirty" type="text" id="object-email">

Second:

<input v-bind:value="value" v-on:input="value = $event.target.value" @input.once="setDirty" type="text" id="object-email">

In the first example value changes only after second input, while the second example works correctly. If we delete @input.once attribute, two examples will work fine.

P.S. Vue 2.4.0

I just downloaded a template from a vue cli as
vue init webpack my-project.
and inside Hello.vue I saw an import statement like this.
import Hello from '@/components/Hello';

and I am curious what does that @ does. It's used at a lot of places but no where it's written what exactly it does. Would be great if someone can explain what it does?

I have been trying to learn VueJS, and for the most part I have everything working. I am running into a issue when I double click on a label, to edit that entry, it will turn into a input but then quickly switch back to a label (not allowing me to edit the entry). Now if I comment out the watch, it works but then of course it will not show the updated data (unless I refresh the page). Why can I not edit something, while I am using watch?

index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link rel="stylesheet" href="index.css"> </head> <body> <section class="todoapp"> <input class="new-todo" autofocus autocomplete="off" placeholder="What needs to be done?" v-model="newTodo" @keyup.enter="addTodo"> <section class="main" v-show="todos.length" v-cloak> <ul class="todo-list"> <li v-for="todo in todos" class="todo" :key="todo.id" :class="{ editing: todo == editedTodo }"> <div class="view"> <label @dblclick="editTodo(todo)">{{ todo.keyword }}</label> <button class="destroy" @click="removeTodo(todo)"></button> </div> <input class="edit" type="text" v-model="todo.keyword" v-todo-focus="todo == editedTodo" @blur="doneEdit(todo)" @keyup.enter="doneEdit(todo)" @keyup.esc="cancelEdit(todo)"> </li> </ul> </section> </section> <script src="https://unpkg.com/vue@2.4.2/dist/vue.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="app.js"></script> </body> </html>

app.js

var app = new Vue({ data: { todos: [], newTodo: '', editedTodo: null }, mounted() { axios.get('/cgi-bin/select.py').then((response) => { this.todos = response.data; }).catch((err) => { console.log(err); }); }, watch: { todos: function () { axios.get('/cgi-bin/select.py').then((response) => { this.todos = response.data; }).catch((err) => { console.log(err); }); } }, methods: { addTodo: function () { var value = this.newTodo && this.newTodo.trim() if (!value) { return } axios.post('/cgi-bin/blacklist_insert.py', { keyword: value }) .then(response => { console.log(response.data) }) .catch(function (error) { console.log(error); }); this.newTodo = '' }, removeTodo: function (todo) { axios.post('/cgi-bin/delete.py', { id: todo.id }) .then(response => { console.log(response.data) }) .catch(function (error) { console.log(error); }); }, editTodo: function (todo) { this.beforeEditCache = todo.keyword this.editedTodo = todo }, doneEdit: function (todo) { if (!this.editedTodo) { return } this.editedTodo = null todo.keyword = todo.keyword.trim() if (!todo.keyword) { this.removeTodo(todo) } axios.post('/cgi-bin/update.py', { id: todo.id, keyword: todo.keyword }) .then(response => { console.log(response.data); }) .catch(function (error) { console.log(error); }); }, cancelEdit: function (todo) { this.editedTodo = null todo.keyword = this.beforeEditCache } }, directives: { 'todo-focus': function (el, binding) { if (binding.value) { el.focus() } } } }) app.$mount('.todoapp')

I'm trying to limit the amount of characters entered on a content editable div.

This works correctly...

<div onkeypress="return (this.innerText.length >= 140 ? false : true )">

However, I need to run this as a Vue method (in single file component). I'm trying to do the following, but can't get it to work:

<div @keypress="limitTextChar"> // data props: { limitText: { type: Boolean, default: false }, limitLength: { type: Number, default: 140 } } limitTextChar(event) { return this.limitText && event.target.innerText.length >= this.limitLength ? false : true }

Where am I going wrong?

Having some issues printing array data to a table using Vue. Can someone help me parse the values using vue and put them in a table. See code below image. Without the array of 2 it would work but I'm not sure how to with the response being multiple.

This is my function in due

//HTML CODE

<tbody> <tr v-for="(input, index) in inputs"> <th>((input.id))</th> <th>((input.tracking_number))</th> <td>((input.first_name))</td> <td>((input.last_name))</td> <td>((input.weight))</td> <td>((input.description))</td> <td>((input.courier))</td> </tr> </tbody>

//end HTML

//Vue Code

var app = new Vue({ el: '#app', data: { inputs: [], form: { scanval: null } }, methods: { updatetable() { this.$http.get('someroute', {params: {page: this.form}}) .then(response => { if (response.body != "null") { console.log(response); this.inputs.push({ id: response.body.id, tracking_number: response.body.tracking_number, first_name: response.body.first_name, last_name: response.body.last_name, weight: response.body.weight, description: response.body.description, courier: response.body.courier }) this.form.scanval = "" } else { this.form.scanval = "", alert("No items found") } }, response => { alert("no item found"); }); },

I am using Laravel 5.5, Vue.js and axios.

I am generating a canvas image from a particular element. The code for saving an image:

save(url) { let element = document.getElementsByClassName('preview'); html2canvas(element, { proxy: url, onrendered: function(canvas) { var image = canvas.toDataURL("image/jpeg"); console.log(image); Vue.axios.post('/add', { image: image, }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // downloadURI("data:" + image, "yourImage.jpg"); } }); }

This is the code from controller:

public function addPost(Request $request) { $photo = $request->file('image'); $path = $request->photo->store('img'); return 'something'; }

But all I am getting is this error: Call to a member function store() on null. So the error is in $path.

I have tried with if($request->hasFile('image')) but it doesn't do nothing. What should I do, so I can store generated image to my public derictory?

I have a component with some form validation. It is a multi step checkout form. The code below is for the first step. I'd like to validate that the user entered some text, store their name in the global state and then send then to the next step. I am using vee-validate and vuex

<template> <div> <div class='field'> <label class='label' for='name'>Name</label> <div class="control has-icons-right"> <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last"> <span class="icon is-small is-right" v-if="errors.has('name')"> <i class="fa fa-warning"></i> </span> </div> <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p> </div> <div class="field pull-right"> <button class="button is-medium is-primary" type="submit" @click.prevent="nextStep">Next Step</button> </div> </div> </template> <script> export default { methods: { nextStep(){ var self = this; // from baianat/vee-validate this.$validator.validateAll().then((result) => { if (result) { this.$store.dispatch('addContactInfoForOrder', self); this.$store.dispatch('goToNextStep'); return; } }); } }, computed: { name: function(){ return this.$store.state.name; } } } </script>

I have a store for handling order state and recording the name. Ultimately I would like to send all of the info from multi step form to the server.

export default { state: { name: '', }, mutations: { UPDATE_ORDER_CONTACT(state, payload){ state.name = payload.name; } }, actions: { addContactInfoForOrder({commit}, payload) { commit('UPDATE_ORDER_CONTACT', payload); } } }

When I run this code I get an error that Computed property "name" was assigned to but it has no setter.

How do I bind the value from the name field to the global state? I would like this to be persistent so that even if a user goes back a step (after clicking "Next Step") they will see the name they entered on this step

I am having an issue and please forgive me for being relatively new to vue. I have this component:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <template> <table class="table table-bordered table-hover table-responsive"> <thead> <tr> <th>File Number</th> <th>Client</th> <th>Borrower</th> <th>Address</th> <th>City</th> <th>State</th> <th>Zip</th> <th>Appraiser ID</th> <th>Paid Status</th> <th>Process Status</th> <th>Order Status</th> <th>Last Update Time</th> <th>Loan Number</th> <th>Due Date</th> <th>Appraiser Due Date</th> </tr> </thead> <tbody> <tr @click="onSelected(order)" data-toggle="tab" href="#orders" role="tab" aria-controls="orders" v-for="order in orders"> <td>{{order.id}}</td> <td>{{order.client_id}}</td> <td>((Jackson))</td> <td>{{order.address1}}</td> <td>{{order.city}}</td> <td>{{order.state}}</td> <td>{{order.zip}}</td> <td>{{order.appraiser_id}}</td> <td>{{order.paid_status_id}}</td> <td>{{order.process_status}}</td> <td>{{order.order_status}}</td> <td>{{order.last_update}}</td> <td>{{order.loan_number}}</td> <td>{{order.due_date}}</td> <td>{{order.appraiser_due_date}}</td> </tr> </tbody> </table> </template> <script> export default { /* * The component's data. */ data() { return { orders: [] }; }, /** * Prepare the component (Vue 1.x). */ ready() { this.prepareComponent(); }, /** * Prepare the component (Vue 2.x). */ mounted() { this.prepareComponent(); }, methods: { onSelected: function(order) { CurrentOrder.$emit('updateCurrentOrder', order); }, /** * Prepare the component (Vue 2.x). */ prepareComponent() { this.getPrecedenceOrders(); }, /** * Get all of the precedence orders for the user. */ getPrecedenceOrders() { axios.defaults.baseURL = 'https://someurlgoeshere'; axios.get('/api/makeacallsomewhere', { headers: { 'Content-Type' : 'application/json', 'Accept' : 'application/json', 'Authorization' : 'Bearer ' + token, } }) .then(response => { this.orders = response.data; }); } } } </script>

This has worked really well for me. However, at this point I am a little lost and I understand this question may be too vague and or not specific enough for this community. The @click="onSelected(order)" is supposed to update the order information in the orders tab. However, I can't get that to work. Can anyone help me out with an example in how to do that? The orders tab will have a separate component.

If this is too vague please just let me know and I can remove this question.

Thanks!