Software

I have a page which renders a child component (chart) that is passed the data that fills the chart as a prop (list). It is being shown and hidden by a div that wraps it, and my problem is that when it is shown and my data (list) changes, it will properly redraw and update. But if it is hidden while the data changes, and then shown again, NOTHING draws at all in the space, it is blank, not even the previous chart. It looks roughly like this:

<div class="bluecards"> <div v-on:click="isShowpie = !isShowpie"> My clickable bar title that hides/shows Pie below </div> <div v-show="isShowpie" class="content"> <div class="chartwrapper"> <pie-chart v-if="loaded" :list="list" class="pchart"></pie-chart> </div> </div> </div>

How to pass values between exported part of a script and non-exported one?

The construction looks like this:

<script> // PART 1: import { EventBus } from './event-bus.js'; EventBus.$on('value-received', value => { this.receivedValue = value; }); // PART 2: export default { data() { return { receivedValue: '' } }, watch: {...}, methods: {...} } </script>

How can I get the value assigned to receivedValue variable and made usable by Vue methods?

I'm using vue.js 2 and bootsrap 3 to open a modal that opens a 2nd modal.

Few days ago, I asked a question on how to set a focus on a control contained in a 2nd modal. I got a great answer that solved the issue.

Problem When opening the 1st modal, the user is able to scroll through it to see its bottom. But after opening and closing the 2nd modal, the focus moves to the page that contains the 1st modal. and when the user scrolls to see the rest of the 1st modal, he scrolls the page behind that 1st modal.

It is very uncomfortable to use especially when the modal is bigger than the screen height. Is there a way to prevent this?

To reproduce this issue, open the answer and click on "Expand snippet"

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"); }); },