Vuejs

I am working on a project that uses Laravel 5.4 & Vue2 (Laravel Socialite) to render messages with Pusher. I am trying to fix several "bugs" and here is one I was not able to fix yet:

I have this function on a Vue element:

showChatBox : function(conversation) { indexes = $.map(this.chatBoxes, function(thread, key) { if(thread.id == conversation.id) { return key; } }); if(indexes[0] >= 0) { console.log('prevented second opening of chat box'); } else{ this.$http.post(base_url + 'data/' + conversation.id).then( function(response) { if(response.status) { var chatBox = JSON.parse(response.body).data; chatBox.newMessage = ""; chatBox.user = conversation.user; chatBox.minimised = false; this.chatBoxes.push(chatBox); vm = this; setTimeout(function(){ vm.autoScroll('.chat-conversation'); },100) } }); } },

I tried to "debug" the chatBoxes element with: console.log(vm.chatBoxes[0].conversationMessages.data[5].body);

And with the Vue Tools for Firefox and I see the message (for example):

how are you?

The original way to render it on the HTML:

<div class="chat-box" v-bind:class="[chatBox.minimised ? 'chat-box-small' : '', ]" v-for="chatBox in chatBoxes"> <!-- Chats Boxes --> <div class="chat-box-header"> <span class="side-left"> <a href="@{{ chatBox.user.username }}" target="_blank">@{{ chatBox.user.name }}</a> </span> <ul class="list-inline side-right"> <li class="minimize-chatbox"><a href="#"><i class="fa fa-minus" @click.prevent="chatBox.minimised ? chatBox.minimised=false : chatBox.minimised=true" aria-hidden="true"></i></a></li> <li class="close-chatbox"><a href="#" @click.prevent="chatBoxes.$remove(chatBox)" ><i class="fa fa-times" aria-hidden="true"></i></a></li> </ul> </div> <div class="chat-conversation scrollable smooth-scroll"> <ul class="list-unstyled chat-conversation-list"> <li class="message-conversation" v-bind:class="[({{ Auth::id() }}==message.user.id) ? 'current-user' : '', ]" v-for="message in chatBox.conversationMessages.data"> <div class="media"> <div class="media-left"> <a href="#"> <img v-bind:src="message.user.avatar" alt="images"> </a> </div> <div class="media-body "> <p class="post-text"> @{{ message.body }} <- important line </p> </div> </div> </li> </ul> </div> <div class="message-input"> <fieldset class="form-group"> <input class="form-control" v-model="chatBox.newMessage" v-on:keyup.enter="postMessage(chatBox)" id="exampleTextarea" > </fieldset> <!-- <ul class="list-inline">this fields are hidden because in dev 1.0 we dont use this fuctionality ,if we enable this the height of chat list to be increased <li><a href="#"><i class="fa fa-camera-retro" aria-hidden="true"></i></a></li> <li><a href="#"><i class="fa fa-smile-o" aria-hidden="true"></i></a></li> </ul> --> </div> </div>

When it is rendered, it has the symbols in the wrong side:

?how are you

I also tried to render that with <p v-html="message.body"></p> but it looks the same. What should I do?

Thanks in advance.

I'm trying to create a component that displays a subset of items passed to it.

So far I have a 'sublist' component with named slots as follows:

... data: () => ({ startItem : 0 }) ... <template> <div> <slot v-for="ctr in maxItems" :name="'s-' + (ctr + startItem - 1)"></slot> </div> </template>

In the parent I do the following:

<sublist :max-items="5"> <div v-for="(i,index) in items" :slot="'s-'+index"> {{index}} </div> </sublist>

When it loads, everything renders fine:

0 1 2 3 4

However when I increment startItem in the sublist component, the output becomes:

5 1 2 3 4

So it removes the 0th slot and stuffs slot 5 in its place. What is a proper way to replace the slots or make them "dynamic"? I'm using VueJS 2.4.2

I'm trying to bind a value from an Object into the prop of a Component, but it isn't reactive. I'm even using $this.set, but it doesn't work at all. Here's my template:

<div class="grid"> <emoji-card v-for="name in shuffledEmoji" :name="name" :ticked="tickedEmoji[name]" :key="name" @click="tickEmoji(name)" /> </div>

• shuffledEmoji: Array<String>

Here, tickedEmoji is an Object with keys being strings, and values being Booleans. tickEmoji just sets tickedEmoji[name] for that name to be true:

methods: { tickEmoji (name) { this.$set(this.tickedEmoji, name, true) } },

That method gets called fine, but the Component doesn't notice the changes.

Child component:

<template> <div class="card" @click="$emit('click')"> <img draggable="false" :src="`/static/blobs/${name}.png`"> <img v-show="ticked" class="green-tick" draggable="false" src="/static/ui/green_tick.png"> </div> </template> <script> export default { name: 'emoji-card', props: ['name', 'ticked'] } </script>

What am I doing wrong here? The child component never gets updated whenever tickEmoji is called.

I'm new to VueJS. I'm trying to create a form with simple Save and Cancel functionality. When binding the model to form fields they get updated immediately as the inputs are changed, but I don't want that tight binding. Instead, I want to be able to save when the "Save" button is pressed and revert the changes when the "Cancel" button is pressed.

What's the suggested Vue way of doing this? Thanks!

See in JSFiddle

<template> <div id="app"> <div> First Name: <input type="text" v-model="user.firstName" :disabled="!isEditing" :class="{view: !isEditing}"> </div><div> Last Name: <input type="text" v-model="user.lastName" :disabled="!isEditing" :class="{view: !isEditing}"> </div> <button @click="isEditing = !isEditing"> {{ isEditing ? 'Save' : 'Edit' }} </button> <button v-if="isEditing" @click="isEditing = false">Cancel</button> </div> </template> <script> var app = new Vue({ el: '#app', data: { isEditing: false, user: { firstName: 'John', lastName: 'Smith' } } }) </script> <style> .view { border-color: transparent; background-color: initial; color: initial } </style>

I'm trying to set up a simple Vue instance with a collection of radio buttons. The goal is that, if the user clicks on a radio button that is already checked, it will uncheck the respective radio button. But I couldn't do this using Vue yet. Here's my code so far:

HTML:

<div id="app"> <div v-for="(val, key) in list"> <input type="radio" name="radio" :value="val" v-model="selected" :id="val"> <label :for="val" @click="uncheck( val )">{{ val }}</label> </div> <button @click="uncheckAll">Uncheck all</button> </div>

JS:

var app = new Vue({ el: '#app', data : { list: [ 'one', 'two', 'three' ], selected: 'two', }, methods : { uncheck: function( val ){ console.log( val, this.selected ); if ( val == this.selected ){ this.selected = false; } }, uncheckAll: function(){ this.selected = false; } } })

Seems like the uncheck method is called, but then the radio button triggers a change event and then updates the value of selected again. uncheckAll method works as expected, probably because it's not tied to the data using v-model.

Any tips or suggestions to make this work? Here's a pen I created for this example: https://codepen.io/diegoliv/pen/JrPBbG

I'm currently attempting to track mutations on properties in other JS classes or objects, currently changes aren't being broadcasted to views that include them, while other properties defined in the state object are broadcasted when mutated.

Vuex Store: export default new Vuex.Store({ state: { audio: new Audio() }, getters: { duration: state => { return state.audio.duration }, currentTime: state => { return state.audio.currentTime } } }); Vue Template <template> <div> {{ currentTime }} :: {{ duration }} </div> </template> <script> export default { name: 'component', computed: { currentTime() { return this.$store.getters.currentTime }, duration() { return this.$store.getters.duration } } } </script>

Current Time and Duration is always is always "0" in the template. Is there a built-in mechanisms to track these mutations, or will I need to write a custom solution, such as unfortunately needing to examine the currentTime every second (if the audio is active)

I'm trying to create a custom directive like v-if so it will only render if the data being passed into the element isn't empty. For example:

<div v-if="!_.isEmpty(data.employer)">{{ data.employer.name }}</div>

This will render only if data.employer isn't empty so it won't throw a reference error. I'm trying to create a directive that will simplify this to just v-notEmpty="data.employer" and run the logic inside the directive but the issue is that it's doing the hook on the custom directive after the element is being rendered so it throws the reference error that employer is undefined.

Is there any way to get a custom directive to work exactly like the v-if which runs the logic before the element is actually created. This is what I had so far:

Vue.directive('notEmpty', (el, binding) => { if (_.isEmpty(binding.value)) { el.style.display = 'none'; } else { el.style.display = 'initial'; } });

I have an issue when adding a new key to an object and then dynamically modifying the fields associated.

For example add a new column, set column name to "url", then attempt to update the value of url for row 1. In my example the value does not actually update even though the field has v-model="row[field.name]. Is there something I should do to make sure row[field.name] is changed when field.name changes

Code: https://codepen.io/RuttyJ/pen/zdgbPB

<table> <thead> <tr> <template v-for="(field, f) in fields"> <th> <flex-row> <flex-column style="width: 100%;"> <flex> <input type="text" :value="field.name" @input="updateField(f, 'name', $event.target.value)" style="width:100%"> </flex> <flex style="width: 100%;"> <select :value="field.type" @change="updateField(f, 'type', $event.target.value)" style="width:100%"> <option v-for="fieldType in fieldTypeOpts" :value="fieldType.value" :selected="fieldType.value == field.type">{{fieldType.label}}</option> </select> </flex> </flex-column> <flex> <button @click="removeField(f)" style="height:100%;">X</button> </flex> </flex-row> </th> </template> <td> <button @click="newField()">+</button> </td> </tr> </thead> <tbody> <tr v-for="(row, r) in rows"> <td v-for="field in fields"> <template> <template v-if="'checkbox' == field.type"> <input type="checkbox" style="float:right;" v-model="row[field.name]" > </template> <input type="number" v-else-if="'number' == field.type" style="width:100%" :value="row[field.name]" @input="updateRow(r, field.name, $event.target.value)"> <input type="text" style="width:100%" v-else v-model="row[field.name]"> {{field.name}} <pre>{{field}}</pre> <pre>{{row}}</pre> </template> </td> <td><button @click="removeRow(r)">X</button></td> </tr> </tbody> <tfoot> <tr> <td v-for="(field, i) in fields"> </td> <td> <button @click="newRow()">+</button> </td> </tr> </tfoot> </table>

FYI i tried both with v-model and value/update()

In my Vue.js project I have the following files:

src/services/http.js

import axios from 'axios' export const HTTP = axios.create({ baseURL: `http://localhost:3000/api/`, responseType: 'json' })

src/api/user.js

import { HTTP } from '@/services/http' export const user = { login (email, password) { HTTP.post('v1/login', { email: email, password: password }) } }

src/store/user/actions.js

import {user} from '@/api/user' export const actions = { loginUser ({ commit }, params) { user.login(params.email, params.password) } }

When I run my code it returns me following error:

TypeError: __WEBPACK_IMPORTED_MODULE_0__api_user__.a.login(...) is undefined

I'm trying to use a data coming from a prop with v-model, the following code works, but with a warning.

<template> <div> <b-form-input v-model="value" @change="postPost()"></b-form-input> </div> </template> <script> import axios from 'axios'; export default { props: { value: String }, methods: { postPost() { axios.put('/trajectory/inclination', { body: this.value }) .then(response => { }) .catch(e => { this.errors.push(e) }) } } } </script>

The warning says:

"Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

So I changed and now I'm using a data as the warning says.

<template> <div> <b-form-input v-model="_value" @change="postPost()"></b-form-input> </div> </template> <script> import axios from 'axios'; export default { props: { value: String }, data() { return { _value: this.value } }, methods: { postPost() { axios.put('/trajectory/inclination', { body: this._value }) .then(response => { }) .catch(e => { this.errors.push(e) }) } } }

So now the code it's not working and the warning says:

"Property or method "_value" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option"

Any idea how to fix the first code to suppress the warning? (or some idea on how to fix the second code?)

Obs.: b-form-input it's not my componente, this is the Textual Input from Boostrap-Vue (Doc for b-form-input)

I am new to VueJs and I have a problem with two components. I am trying to display a component with vuejs router and I must pass properties to that component and since it's not a child of that component (it's in different directory), how can I pass data to that component? For example:

This is a Parent component:

<template> <div class="container"> <router-link to="/Form"></router-link> </div> </template> <script> export default{ data(){ return{ values: {val1: 123, val2: 321} } } } </script>

This is a components that needs properties, Form component:

<template> <div class="container"> <form> <input type="text" v-model="values.val1"/> <input type="number" v-model="values.val2"/> </form> </div> </template> <script> export default{ props: { values: { type: Object } } } </script>

I have the following select box in my Rails app:

<div id="vue-element"> <strong><%= f.label :property_type %></strong><br> <%= f.select(:property_type, options_for_select(@types.map {|type| [type.titleize, type]}, listing.property_type), 'v-model': 'propertyType') %> </div>

but when I try to display the content of propertyType on the same page, Vue is not rendering the selected entry:

{{ propertyType }}

This is how I instantiate vue.

new Vue({ el: '#vue-element', data: { propertyType: undefined } })

Any idea why this may be or how I can debug this? Thanks in advance!

I generated the electron-vue scaffold with the vue-cli using vue init simulatedgreg/electron-vue After running yarn I started the application with yarn run dev. By default I get these errors:

? Electron ------------------- Debugger listening on ws://127.0.0.1:5858/189cf481-dd71-43bf-be88-90673ee0aae1 For help see https://nodejs.org/en/docs/inspector ? ---------------------------- ? Electron ------------------- [10928:0911/182704.656:ERROR:CONSOLE(7323)] "Extension server error: Operation failed: : has no execution context", source: chrome-devtools://devtools/bundled /inspector.js (7323) ? ---------------------------- ? Electron ------------------- [10928:0911/182705.653:ERROR:CONSOLE(7323)] "Extension server error: Operation failed: : has no execution context", source: chrome-devtools://devtools/bundled /inspector.js (7323) ? ---------------------------- ? Electron ------------------- [10928:0911/182706.654:ERROR:CONSOLE(7323)] "Extension server error: Operation failed: : has no execution context", source: chrome-devtools://devtools/bundled /inspector.js (7323) ? ----------------------------

On top, the application takes almost 30 seconds to load. Before that I just see the Electron / Chrome Debugger window but they are not filled with any content. This loading behavior is still given when I use yarn build to create and run the packaged electron application.

Any idea how to fix this?

My parent component like this :

<template> <div ref="modal" class="modal" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content modal-content-data"> <form id="form-data"> ... <location-select .../> ... </form> </div> </div> </div> </template> <script> import LocationSelect from './LocationSelect.vue' export default{ name: 'CartModal', components:{ LocationSelect, }, mounted(){ $(this.$refs.modal).on('hidden.bs.modal', () => { Object.assign(this.$data, this.$options.data()) }) } } </script>

If modal hidden, it will reset data in parent component and it works

I want to reset data also in child component

I try like this :

<template> <select class="form-control" v-model="selected" ...> ... </select> </template> <script> export default{ name: 'LocationSelect', ... created() { $(this.$parent.$refs.modal).on('hidden.bs.modal', () => { Object.assign(this.$data, this.$options.data()) }) } }; </script>

But it does not work

The child component no reset the data

How can I solve this problem?

I am modifying hacker-news example and I added notifications component (If fetching external data goes wrong: save notification with error in vuex, after user reads it and clicks X remove it from vuex state). Looks like this:

[NOTIFY] (state, message) { state.data.push(message) }, [READ_NOTIFICATION] (state, index) { state.data.splice(index, 1) }

Problem: When data is being fetched and state is being set on server, it keeps error there in global state forever, which means that if I open new browser I will get the same old error from previous session.

Shouldn't server-side vuex state reset on every request? What am I missing?

I am developing a vuejs project with the webpack template on localhost i.e. url: localhost:8080 but I have an express server running in https://foo.bar.com

In the past, I have been making a direct request to the express server by disabling CORS, but now I am trying to make a request via proxy.

According to this API Proxying During Development I have added the following to my config/index.js

proxyTable: { // proxy all requests starting with /api to jsonplaceholder '/': { target: 'https://foo.bar.com', changeOrigin: true, pathRewrite: { '^/': '' } }

And in my login page components/login.vue

I have something like this:

... methods: { Login(){ // trying 3 times with different urls api.request('post', 'login', {email, password}).then().catch() api.request('post', '/login', {email, password}).then().catch() api.request('post', 'https://foo.bar.com/login', {email, password}).then().catch() } }

But I get an error like this:

Failed to load https://foo.bar.com/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

I'd like to use VueRx in a Typescript project.

VueRx extends the Vue prototype with several methods: https://github.com/vuejs/vue-rx#other-api-methods. Since VueRx does not ship with TS declarations, I would like to roll my own. Unfortunately I'm unable to come up with a way to extend the Vue declarations bundled with VueJs due to the way the declaration is written (classes rather than interfaces). Any suggestions?

I would like to pass data to child component but do not want to bind it when the data changes in the parent

<parent :val="myval"> <child :initialval="val"></child> </parent>

This code binds my initial value to myval, I just want it to be passed first time and do not want initialval to be reactive to changes of my val.

Can I do it without setting a local variable in mounted() function of child component?

I'm using Laravel 5.5 and VueJS for my application.

I have a form on the vue instance which allows the user to enter details of an individual and add them to a visit. When added my method adds the details from the inputs to the array of visitors.

PROBLEM: When I add a visitor to the visitors array and click remove it works great, when I import and click remove on one of the visitors it removes the wrong visitor.

My vue instance (part)

data: { visitor: {}, }

My form

<input v-model="visitor.last" class="input" placeholder="Last Name"> <input v-model="visitor.company" class="input" placeholder="Company"> <input v-model="visitor.email" class="input" placeholder="Email" type="email"> <button class="button is-primary" @click="saveVisitor">Add Visitor</button>

My Method

saveVisitor() { this.visitors.push(this.visitor); this.visitor = {}; },

This all works great and works as it should, I've now added another method for populating the list of Visitors and this is a spreadsheet import which I parse in my Laravel backend and return to my Vue instance.

METHOD FOR SPREADSHEET

submitImport() { const vm = this; var form = new FormData(); form.append('file', document.getElementById('file').files[0]); axios({ method: 'post', url: '/import/visitors', data: form }).then(function(response){ if(response.status === 200){ vm.visitors = response.data; } else { vm.loading = false; } }); },

When going through the spreadsheet I build up a array in the backend:

Laravel Controller (part)

$visitor[] = array( 'first' => $v->FirstName, 'last' => $v->LastName, 'email' => $v->Email, 'company' => $v->Company );

After the function has finished looping through the rows on the spreadsheet my controller returns the array back to the vue instance.

return response($visitor,200);

I accept the array on my Vue Instance and populate the visitors array on my vue instance with the results.

vm.visitors = response.data;

And this works great! my only problem is that when I try to remove one of the visitors from the vm.visitors array it removes the wrong one which I'm guessing is due to the keys.

see my remove method.

removeVisitor(visitor) { console.log(visitor); //this.visitors.splice(visitor,1); },

When I view the console I get the following, please note I've added some from the spreadsheet import and some via the form inputs.

It looks as though the visitors array on my vue instance has two different types of data.

When you click the ... in the top object this does return the name etc but this is different from the 2nd object which contains the data clearly?

Hi all I need some help with activating a sub menu route from a main menu route - vue-router. I have the following code in my app.js for routing. The children object has a sub-route that I want highlighted when the main menu nav link (transactions) is clicked. In my browser URL I see http://localhost:3000/transactions/transaction_history which tells me that it is going to the destination I want but I have no clue to get the sub-route active from the main nav? Any help will be great.

app.js

const routes = [ { name: 'transactions', path: 'transactions/transaction_history', component: transactions, children: [ { name: 'transaction-history', path: '/transactions/transaction_history', component: transaction_history } ] } ]

In my navigation.vue I have

<li class="u-nav__tab-item pull-left"> <router-link v-bind:class="{ 'u-nav__tab-item--active' : $route.name === 'transactions' }" :to="{ name: 'transactions', path: '/transactions' }" exact>Transactions <div class="u-nav__dropdown-arrow pull-right"></div> </router-link> </li>

And in my transactions.vue template I have this link which is the first-child of the sub menu

<li class="o-pf-list__item o-pf-list__item--border o-pf-list__item--line-height" :class="{ 'u-nav__tab-item--active-border-left' : $route.name === 'transaction-history' }"> <router-link v-bind:class="{ 'u-nav__tab-item--active' : $route.name === 'transaction-history' }" :to="{ name: 'transaction-history', path: '/transactions/transaction_history' }" exact>Transaction History</router-link> </li>

Example of what I want when the main nav is clicked. This is the sub menu first child.