Software

I am new to Vue and have improved this code from various tutorials.

However, I am faced with this "Undefined" group name issue here.

.html:

<multiselect v-model="value" :options="options" :multiple="true" track-by="name" :hide-selected="true" :custom-label="customLabel" :searchable="false" placeholder="" group-values="details" group-label="groupDivision" > </multiselect>

.js:

new Vue({ components: { Multiselect: VueMultiselect.default }, data: { value: { groupDivision: 'Government', name: 'Fish', contact: 'Fish@.com' }, options: [ { groupDivision: 'Governemnt', details:[ { name: 'Fish', contact: 'Fish@.com' }, { name: 'Police', contact: 'Police@.com' }, { name: 'Society', contact: 'Society@.com' } ] }, { groupDivision: 'Media', details:[ { name: 'BBC', contact: 'BBC@.com' }, { name: 'CNN', contact: 'CNN@.com' }, { name: 'CBC', contact: 'CBC@.com' } ] }, ] }, methods: { customLabel (option) { return `${option.name}` } } }).$mount('#app')

I've already set the "group-label" but it still shows "undefined".

Does anyone have idea what the problem? Thanks in advance!

Link to the code: https://codepen.io/dennis-leeyinghui/pen/VzybrR

What is the best way to update the entire observed array and trigger a rerender in vue.js without having to iterate an push all the items?

I have read the documentation here: https://vuejs.org/v2/guide/list.html#Replacing-an-Array

But it doesn't make sense to me having to filter, concat or slice just to update the array? There must be something I missed?

Steps

• Create a method in vue, showMessage
• Create an object message: {show : false, text: 'any text'} in the data section
• call showMessage from an HTML element using v-on:click='showMessage'
• In the showMessage function:
  • set the value of 'show' to true using this.message.show = true
  • print the value of 'show' using console.log(this.message.show)

What is expected?

The value of 'show' should set to true without any error/warning

What is actually happening?

I get a warning AND an error on the line:

this.message.show = true

as below:

[Vue warn]: Error in render function: "TypeError: Cannot read property 'toFixed' of undefined" TypeError: Cannot read property 'toFixed' of undefined

However, the line console.log(this.message.show) prints correctly

The issue is not re-producible, when the same button is clicked under other circumstances.

The expected behavior is as shown by the jsFiddle, but I dont see any error running it.

Vue Version: 2.4.2

JSFiddle: https://jsfiddle.net/afshanaman81/50wL7mdz/54338/

Depending on whether the user is logged in, I need to adjust the size and content of two divs inside my topbar. So if they aren't logged in it should be like this:

<div id='search' width="400px"></div><div id="login" width="200px"><img></div>

And when they're logged in it should be like this:

<div id='search' width="200px"></div><div id="login" width="400px"><div id='somecontent></div><div id='morecontent'></div></div>

I know i can achieve this by hardcoding both of them entirely and then using v-if statements but I was wondering if there was a better way.

Vue JS computed property is not triggered With this markup

<!-- language: lang-html --> <p>£{{plant_price}}</p> <div v-if="selected.plant.variations.length > 0 "> <select v-model="selected.plant.selected_variation" class="form-control"> <!-- inline object literal --> <option v-for="(variation, i) in selected.plant.variations" :selected="variation.id == selected.plant.selected_variation ? 'selected' : ''":value="variation.id"> {{variation.name}} </option> </select> </div> <!-- language: lang-js --> var app = new Vue({ el: '#vueApp', data: { selected: { type: {a: '' , b: ''}, vehicle: '', plant: { } }, computed: { plant_price: function() { if (this.selected.plant.variations.length > 0 ) { var variant = _.find(this.selected.plant.variations, {id: this.selected.plant.selected_variation }); return variant.price; } else { return this.selected.plant.price; } } ...

selected.plant is populated via Ajax. I have checked through the debugger, and can see that all the correct properties are available.

selected:Object type:Object vehicle: "Truck" plant:Object id:26 price:"52" regular_price:"100" selected_variation:421 variations:Array[2] 0:Object id:420 name:"small" price:52000 regular_price:52000 1:Object etc...

I have a computed property, which should update the plant_price based on the value of selected.plant.selected_variation.

I grab selected.plant.selected_variation and search through the variations to retrieve the price. If no variation exists, then the plant price is given.

When the app loads, I can see that the plant_price is updated. However, it does NOT respond when I change selected.plant.selected_variation - its as if the computed property isn't listening to selected.plant.selected_variation

I must be doing something wrong?

I am new in vue js. Currently i am trying to passing data into vue js components. So far if i passing user name or other information is working fine. But if i passing the avatar link it will showing error in npm run watch. Any solution for this?

This is my code

<li v-for="comment in comments"> <div class="avatar"><img src="{{ comment.user.avatar }}" alt="" /></div> <div class="comment-content"><div class="arrow-comment"></div> <div class="comment-by">{{ comment.user.name }}<span class="date">22 August 2017</span> <a href="#" class="reply"><i class="fa fa-reply"></i> Reply</a> </div> <p>{{ comment.content }}</p> </div> </li>

This is the object i get.

enter image description here

The vue - awesome - swiper Problems with plug-ins

I'm trying to v-model to an array item's property. When I load the page I see "[Vue warn]: Error in render function: 'TypeError: Cannot read property 'viewFood' of undefined' in the console and a blank page.

this is with vue.js 2.x.

https://codepen.io/jzaun/pen/YxYyJN/

html

<div id="ai-config"> <div class="info"> <div class="row"> <h1>Resource Points</h1> </div> <div class="row"> <label>Total:</label> <div class="value"> {{maxResourcePoints}} </div> </div> <div class="row"> <label>Remaining:</label> <div class="value"> {{maxResourcePoints - usedResourcePoints}} </div> </div> </div> <div> <table> <tr> <td></td> <td v-for="(option, idx) in options"> {{option.title}} </td> </tr> <tr v-for="n in directions"> <td>Direction {{n}}</td> <td v-for="option in options"> <input type="checkbox", v-model="selected[n][option.key]" /> </td> </tr> </table> </div> </div>

javascript

new Vue ({ el: '#ai-config', data: { maxResourcePoints: 10, usedResourcePoints: 0, selected: [], directions: 8, options: [{ title: 'Food', key: 'viewFood', cost: 1 }, { title: 'Water', key: 'viewWater', cost: 1 }, { title: 'Own', key: 'viewOwn', cost: 1 }, { title: 'Other', key: 'viewOther', cost: 1 }] }, methods: { }, created: function () { this.selected = []; for(i=0; i< 8; i++) { this.selected.push({}); } } });

Using vue, I am trying to trigger multiple events on a click and pass 'event' variable, so that I can use event.target.

I tried this:

<element @click="onSubmit(), onChange()"></element>

And in my methods, I tried

methods: { onSubmit(e) { console.log(e) }, onChange(e) { console.log(e) } }

Cannot read property 'target' of undefined

What is the proper way of achieving this?

In order to work with custom vue components in a v-for binding, the frameworks asks you to specify a key for each component.

The first thing that comes to my mind is using the index as key, i.e.

<MyComponent v-for="(i, data) in list" :key="i"></MyComponent>

So far so good, but how will Vue handle something like

<MyComponent v-for="(i, data) in list" :key="i"></MyComponent> <MyComponent v-for="(i, data) in list" :key="i"></MyComponent>

Do I need to keep track of making keys unique globally for all my MyComponent components? I.e. :key="i + 'scope1'", :key="i + 'scope2'" etc.

TL;DR: Will Vue mix up two components with the same key? Is it enough to make the keys unique for each loop context?

When using the vue-router with .vue files, there is no documented way to pass data from one view/component to another.

Let's take the following setup...

main.js:

import Vue from 'vue'; import VueRouter from 'vue-router'; Vue.use(VueRouter); let routes = [ { path: '/page1', component: require('./views/Posts.vue') }, { path: '/page2', component: require('./views/EditPost.vue') } ]; let router = new VueRouter({ routes }); new Vue({ el: '#main', router });

Posts.vue:

<template> <div> Posts.vue passing the ID to EditPost.vue: {{ postId }} </div> </template> <script> export default { data() { return { allPostsHere: // Whatever... } } } </script>

EditPost.vue:

<template> <div> EditPost.vue received ID from Posts.vue: {{ receivedId }} </div> </template> <script> export default { data() { return { receivedId: // This is where I need the ID from Posts.vue } } } </script>

Please note: It is not possible to receive the ID directly from the EditPost.vue, because it has to be selected from Posts.vue.

Question: How can I pass the ID from one view/component to the other?

Hi I got a problem with packery.

Based on this solution https://codepen.io/Monocle/pen/ZbeBGL

I have every grid-item as a component and then in app.js (main file) im initializing packery based on example given.

var pckry = new Packery(container, { itemSelector: '.grid-item', columnWidth: '.grid-sizer', });

I want now to handle turn on/off components and then making them draggabilly and bind/unbind to packery. But the problem is I cant make packery as an attrbute of vue object and just make this.pckry.getShiftPositions() (based on example: https://codepen.io/desandro/pen/PZrXVv).

pckry.on( 'dragItemPositioned', function() { // save drag positions var positions = pckry.getShiftPositions( 'data-item-id' ); localStorage.setItem( 'dragPositions', JSON.stringify( positions ) ); });

The problem is with handling instance of packery object I guess. its just not working.

this.pckry.on( 'dragItemPositioned', function() { // save drag positions var positions = this.pckry.getShiftPositions( 'data-item-id' ); localStorage.setItem( 'dragPositions', JSON.stringify( positions ) ); });

Doesnt actually work. When im making it as

this.pckry = newPackery(...);

How can I actually handle that?

I want to create div's dynamically based on the number of elements present in an array. The div's contain the html element created by ProgressBar.js.

This the Vue.js code

import ProgressBar from 'progressbar.js' var bar; export default { data() { return { fitness: ['Dietary Intake', 'Exercise'], val: 0.65 } }, mounted(){ this.showProgressBar(this.val); }, created: function() { }, methods:{ showProgressBar: function(val){ new ProgressBar.Circle('#container',{ trailColor: 'gainsboro', trailWidth: 20, color: 'teal', strokeWidth: 20 }).animate(val); } } } <div class="content" v-for="fitness in fitness"> <span>{{ fitness }}</span> <div id="container"></div> </div> I am trying to get done something like this,

Since an id is associated with only one div, I am not able to execute a new ProgressBar.Circle object that would create another div. Is there a way to dynamically create a new div with different a id inside the v-for every time the new ProgressBar.circle is executed? Can somenone please help me out here?

I'm tring to have an transition (animation) on html table row with vue.js with no success here the full example https://jsfiddle.net/c8vqajb4/

here the basic html table :

<div class="container-fluid" id="data"> <br> <br> <table border="1" class="table table-bordered"> <thead class="thead-inverse"> <tr> <th>anim</th> </tr> </thead> <tbody> <template v-for="item, k in items"> <tr> <td><button @click="item.more = !item.more" type="button" v-bind:class="[item.more ? 'btn-danger' : 'btn-primary']" class="btn">Click /!\</button></td> </tr> <transition name="fade" > <tr v-bind:key="item" v-if="item.more"> <td><p >{{k + 1}} - {{item.data}}</p></td> </tr> </transition> </template> </tbody> </table> </div>

the css for the transition:

.fade-enter-active, .fade-leave-active { transition: opacity 2s } .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ { opacity: 0 }

the vuejs code:

(function () { new Vue({ el: '#data', data: { items: [ { data: 'd1', more: false }, { data: 'd2', more: false }, ] } }); })();

what i'm doing wrong ?

How would I loop a JSON object like the one below with v-for? I want to loop all ID's/Numbers, and all items in inside each number, and display it all in a list... I know I can loop all system_events easily using v-for="item in system_events" But how do I loop all different ID's/Numbers, and all items inside ?

My JSON looks like:

{ "system_events": { "1013": [{ "id": 25899, "timestamp": "2017-08-15T21:26:42Z", "type": "alarm", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:26:40Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Randers pr 44b sidste station" }, { "id": 26157, "timestamp": "2017-08-15T21:32:17Z", "type": "alarm", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T21:32:06Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Randers pr 44b sidste station" } ], "1015": [{ "id": 23777, "timestamp": "2017-08-15T20:38:08Z", "type": "alarm", "code": 191, "title": "", "description": "", "appeared": "2017-08-15T20:38:00Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" }, { "id": 23779, "timestamp": "2017-08-15T20:38:08Z", "type": "alarm", "code": 190, "title": "", "description": "", "appeared": "2017-08-15T20:37:58Z", "disappeared": null, "acknowlegded": null, "solved": null, "system_name": "Favrskov Svenstrup gyvelvej" } ] } }

I am trying to write a simple single page application with Vue to gain an understanding of it's capabilities. This simple application will display a list of acronyms, then the user can click a link and be given details about that acronym. I am using vue-router to manage the routes. My basic app div is like below:

<div id="app"> <h1>Hello App!</h1> <p> <router-link to="/">Home</router-link> <router-link to="/acronyms">All Acronyms</router-link> </p> <router-view></router-view> </div>

I first create a template to list all the acronyms:

const AllAcronyms = {template: '<div><ul id="all-acronyms"><li v-for="acronym in acronyms">{{ acronym.id }} - {{acronym.abbreviation}}</li></ul></div>' };

Then I create the router, routes, and the Vue:

var routes = [ { path: '/acronyms', component: AllAcronyms } ]; var router = new VueRouter({ routes: routes }); var view = new Vue({ el: "#app", data: { acronyms: [ { id: 1, abbreviation: "ABC" }, { id: 2, abbreviation: "DEF" }, { id: 3, abbreviation: "GHI" } ] }, router: router });

It tells me that "acronyms" is undefined. Is there a way to use the v-for directive on a router view by passing the data to that route, or to create a new Vue object on the "all-acronyms" unordered list when the route is called? What is the best way to go about this?

I am trying to build a menu between categories. If a category has a sub-category it returns a value that says has_subCategory as boolean 0/1.

<template> <select><slot></slot></select> </template> <script> export default { props: ['value', 'hasSubCat'], watch: { value: function(value, hasSubCat) { this.relaod(value); this.fetchSubCategories(value, hasSubCat); } }, methods: { relaod: function(value) { var select = $(this.$el); select.val(value || this.value); select.material_select('destroy'); select.material_select(); }, fetchSubCategories: function(value, hasSubCat) { var mdl = this; var catID = value || this.value; var has_subCat = hasSubCat || this.hasSubCat; console.log("has_subCat:" + hasSubCat); mdl.$emit("reset-subcats"); if (catID) { if (has_subCat == 0) { if ($('.subdropdown').is(":visible") == true) { $('.subdropdown').fadeOut(); } } else { axios.get(URL.API + '/subcategories/' + catID) .then(function(response) { response = response.data.subcatData; response.unshift({ subcat_id: '0', subcategory_name: 'All Subcategories' }); mdl.$emit("update-subcats", response); $('.subdropdown').fadeIn(); }) .catch(function(error) { if (error.response.data) { swal({ title: "Something went wrong", text: "Please try again", type: "error", html: false }); } }); } } else { if ($('.subdropdown').is(":visible") == true) { $('.subdropdown').fadeOut(); } } } }, mounted: function() { var vm = this; var select = $(this.$el); select .val(this.value) .on('change', function() { vm.$emit('input', this.value); }); select.material_select(); }, updated: function() { this.relaod(); }, destroyed: function() { $(this.$el).material_select('destroy'); } } </script>

What I dont understand is that console.log("has_subCat:" + hasSubCat); prints out different values each time I change the select. It should only display 0 or 1

Hi I'm trying to create an Vue app which takes one key color and creates a color palette from the key color. 2 colors lighter and 2 colors darker. I have an input field where you enter a hex code and it will then generate the other 4 colours. I'm using the library chroma.js to generate darker/brighter colors and the syntax looks like this:

chroma('red').darken(.4)

And this is the input field

<input class="w-100 pv3 pl4 input-reset ba b--black-20" @keyup="getColor(colorValue)" v-model="colorValue" placeholder="0AD674" >

This is my for loop

<li v-for="item in items"> {{ item.colorProperty }} {{ item.intensity }} {{ colorValue }} </li>

And my data inside the Vue instance.

data () { return { colorValue: '4e35e1', items: [ { intensity: 3, colorProperty: 'darken' }, { intensity: 1, colorProperty: 'darken' }, { intensity: 0, colorProperty: '' }, { intensity: 1, colorProperty: 'brighten' }, { intensity: 3, colorProperty: 'brighten' } ], } }

All of this generates something like

3 darken 4e35e1 1 darken 4e35e1 0 4e35e1 1 brighten 4e35e1 3 brighten 4e35e1

Which is cool but ideally I would use the data values to feed the Chroma.js syntax like

transformColor: function(value, property, intensity) { return chroma(value).property(intensity) }

But obviously that doesn't work. What's the best way to achieve this?

I realise this is a open ended question. But I have had troubles figuring out whether I should use a filter or a component or a computed function. I tried most things but none of them would work. I come from a jQuery background so this new data-centric approach is proving to be difficult to wrap my head around. I'm grateful for any pointers!

With the vue-cli webpack template... has anyone gotten npm run e2e to work on a headless box? I've tried running it in docker's node:latest and under elgalu/docker-selenium both times I get this cryptic error

Starting selenium server... started - PID: 6621 [Test] Test Suite ===================== Running: default e2e tests Error retrieving a new session from the selenium server Connection refused! Is selenium server started? { state: 'unknown error', sessionId: null, hCode: 648061585, value: { localizedMessage: null, cause: null, suppressed: [], message: null, hCode: 1628902597, class: 'java.util.concurrent.TimeoutException', screen: null }, class: 'org.openqa.selenium.remote.Response', status: 13 } npm ERR! Linux 4.9.36-moby npm ERR! argv "/usr/bin/nodejs" "/usr/bin/npm" "run" "e2e" npm ERR! node v6.11.2 npm ERR! npm v3.10.10 npm ERR! code ELIFECYCLE npm ERR! learn-web@1.0.0 e2e: `node test/e2e/runner.js` npm ERR! Exit status 1

I am using the vue-form-generator component. I am attempting to update a variable in the store with the response from a call back. What I believe the relevant code is (inside the schema:fields property):

{ type: 'submit', buttonText: 'Save Updates', styleClasses: ['custom-submit', 'custom-submit-primary', 'custom-submit-full'], disabled () { return this.errors.length > 0 }, validateBeforeSubmit: true, onSubmit: function (model, schema) { Vue.CustomSubmit('UserUpdate', model).then((response) => { this.$store.user = response }) } }

From within the Vue.CustomSubmit().then((response)) => { ... } I don't seem to be able to access the store.

It works slightly higher in scope, such as:

data () { return { avatar: this.$store.getters.user.avatar, ... }