Software

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, ... }

i am using framework7 last version , and my app hierarchy is like that :

vue router-view , vue children are loaded within router-view , one of those children is the root of framework7 app , when i navigate between "the root of framework7 which is a component" and any other component , the accordion animation start to stuck and act unexpectedly but it works good before navigation done .

i try to reset everything here with in the vue component which acts as root

export default { data() { return { appIsRdy: false } }, mounted() { this.$store.state.f7.f7Obj = new Framework7({ root: '.f7root' }); this.$store.state.f7.$$ = Dom7; this.$store.state.f7.mView = this.$store.state.f7.f7Obj.addView('.view-main', { domCache: true }); this.appIsRdy = true; }, components: { MainPage, RedditPage }, beforeDestroy() { this.$store.state.f7.f7Obj = null; this.$store.state.f7.$$ = null; this.$store.state.f7.mView = null; this.appIsRdy = false; } }

I have a problem with connection server by client application. I want to connect with my arduino board and control by client side wriiten in vue.js.

I have a server who run on node.js, and run good.

const http = require('http'); const socketIo = require('socket.io'); const port = process.env.PORT || 5000; const server = http.createServer().listen(port, () => { }); const five = require('johnny-five'); const board = new five.Board(); const pin = { 13: { led: { on: () => console.log('on'), off: () => console.log('off'), }, }, }; const io = socketIo(server); board.on('ready', () => { const led = new five.Led(13); led.off(); pin[13].led = led; }); io.sockets.on('connection', (socket) => { socket.on('message', (channel, message) => { if (channel === 'on') pin[message].led.on(); if (channel === 'off') pin[message].led.blink(500); }); });

but i have a problem with client-side. This is my code, and i don't know what can i do now.

<template> <router-view> </router-view> </template> <script> import Vue from 'vue'; import VueRouter from 'vue-router/dist/vue-router'; import LoginRoutes from 'features/login/login.routes'; import FoobarRoutes from 'features/foobar/foobar.routes'; import 'common/components'; import Jquery from 'jquery'; import BootstrapCSS from 'bootstrap/dist/css/bootstrap.css'; import Bootstrap from 'bootstrap'; Vue.use(VueRouter); io = require("socket.io/lib/socket"); var socket = io.connect("http://localhost:5000"); const routes = [ { path: '/', redirect() { return '/login'; }, }, ...LoginRoutes, ...FoobarRoutes, ]; const router = new VueRouter({ routes, }); export default { router, }; </script>

and this is my view :

<template> <div> <h1>TURN ON/OFF LED</h1> <button class="btn btn-danger" @click='on'>13: ON</button> <br><br> <button @click='off'>13: OFF</button> </div> </template> <script> export default { name: 'login-view', methods: { on: function() { socket.send('on', 13); // this.$socket.emit('on', 13); }, off: function() { socket.send('off', 13); }, }, }; </script> <style> </style>

I am watching an array and if some conditions met I want to disable / modify other elements but no luck so far, as the variable already_answered is not reactive.

<input :disabled="already_answered" type="text" /> data: function() { return { already_answered: false, somearr: [], }; }, watch: { somearr() { for (var i = 0; i < this.somearr.length; i++) { if (this.somearr[i]["id"] == 5) { this.already_answered = true break; } } }, },

There is a database with two tables (recipe, flavor). Between them one-to-many relationships one recipe is a lot of flavors. I add data through the put vue method

saverecipe: function(){ this.$http.put('/recipe/new', this.newrecipe).then(function (data) { console.log(this.newrecipe) }) }

Google Chrome data example with one flavor

handler

func PutRecipe(db *sql.DB) echo.HandlerFunc { return func(c echo.Context) error { var recipe models.Recipe c.Bind(&recipe) id, err := models.PutRecipe(db, recipe.RECIPENAME, recipe.BOTTLEID, recipe.BOTTLESIZE, recipe.PG, recipe.VG, recipe.NICOTINE, recipe.DATE, recipe.NOTE, recipe.FLAVORID, recipe.NAME, recipe.DROPS, recipe.RECIPEID) if err == nil { return c.JSON(http.StatusCreated, H{ "created": id, }) } else { log.Fatal(err) return err } } }

model

func PutRecipe(db *sql.DB, recipename string, bottleID int, bottlesize int, pg int, vg int, nicotine int, date string, note string, flavorid int, name string, drops int, recipeid int) (int64, error) { sql := `INSERT INTO recipe(recipename, bottleID, bottlesize, pg, vg, nicotine, date, note, flavorid) VALUES(?,?,?,?,?,?,?,?,?,?,?,?); INSERT INTO flavor(name, drops, recipeid) VALUES(?,?,?)` stmt, err := db.Prepare(sql) if err != nil { log.Fatal(err) } defer stmt.Close() result, err2 := stmt.Exec(recipename, bottleID, bottlesize, pg, vg, nicotine, date, note, flavorid, name, drops, recipeid) if err2 != nil { log.Fatal(err2) } return result.LastInsertId() }

Data must be written in two tables. One is a recipe. One - flavor. How can I do that? If you need I can lay out all the code on the github

I am trying to use jQuery Lazy Loading in my Laravel/Vue project but I am struggling to get an image to appear in my Vue component. I have the following img block which I thought would work:

<img v-if="vehicle.photo_path != null" :data-original="'/storage/vehicles/' + vehicle.photo_path" class="lazy" height="180" width="150"/>

I did find this other question on here - Static image src in Vue.js template - however when I try that method I get this: Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

So I switched back to the v-bind method but all I am getting is a white box with a grey border - no image. If I v-bind on the src attribute however I can see the image correctly.

I know I have implemented the Lazy Loading plugin correctly as I can successfully call it elsewhere on my site (such as on a blade view), but I'm not sure where I am going wrong. Thank you.

I am using vue2 and I am trying to fetch an api and render the contents in my page, this is all done in my Orgs.vue file and here is the code:

<template lang="html"> <div class=""> {{ orgs | json }} </div> </template> <script> export default { data: { orgs: false }, created() { request = axios({ url: 'https://....', method: 'GET', }) .then(function(response) { this.orgs = response; }) .catch(function(error) { console.log('error getting orgs::', error); }); } }; </script> <style lang="css"> </style>

However everytime I run the page I get this error:

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

I tried to change

data: { orgs: false },

to

data() { return {orgs: false} },

but the error is still there

I am using Vue.js and i want to try to render components but it isn't working

main.js:

import Vue from 'vue'; import 'bulma'; import Navbar from './Navbar.vue'; Vue.component('navbar', Navbar); const MyC = Vue.component('myc', { template: '<h1>Are you working?</h1>', }); const root = new Vue({ el: '#app', components: { Navbar, MyC, }, });

index.html

<body> <div id="app"> <navbar></navbar> <myc></myc> </div> <script src="dist/build.js"></script> <!-- Webpack endpoint --> </body>

Navbar.vue

<template> <h1>HELLO FROM NAVBAR</h1> </template> <script> // Some logic here export default { name: 'navbar', }; </script>

I coded as written in guide but neither of the ways to render a component is working

I just have blank page

I am using webpack+vue-loader

I'm starting to work with laravel and I try to use Vue. So on my resources/assets/js/app.js I have

Vue.component('example', require('./components/Example.vue')); const app = new Vue({ el: '#app' });

So my Example.vue is basicly what it's given with laravel. And in my welcome.blad I have

@extends('layouts.app') @section('content') <example> </example> @endsection <script src="{{ elixir('js/app.js') }}"></script>

in my package.json I have :

"devDependencies": { "vue": "^2.1.10", "vue-resource": "^1.0.3" }

But Nothing appear in my welcome page. I ran npm install npm run dev And change several things in my script, don't remember all but tried a lot of things and can't make it work

I've run into a problem when I delete a component any component created after it deleted and then recreated. Component in question gets deleted and child component created after it get deleted and then recreated.

Is there a reason why this is happening?

here is a video of it: maxniko.tinytake.com/sf/MTg3NTc2M182MDIyMzI5

Here is fiddle: jsfiddle.net/xk5yL3h8

fiddle code:

Vue.component('column-component', { props: ["columnData", "uniqueId"], mounted: function() { console.log('mounting column: ' + this.uniqueId) }, beforeDestroy: function() { console.log('removing: ' + this.uniqueId) }, template: ` <div style="float: left; padding: 10px; margin-right: 10px; border: 1px solid black;">aaa</div>` }) Vue.component('row-component', { props: ["rowData", "uniqueId"], data: function data() { return { columns: [], columnCount: 0 } }, mounted: function() { console.log('mounting row: ' + this.uniqueId) }, methods: { addColumn() { console.log var column = new Object() column.uniqueId = this.uniqueId +'.col.'+ this.columnCount this.columns.push(column) this.columnCount = this.columnCount + 1 } }, beforeDestroy: function() { console.log('removing: ' + this.uniqueId) }, template: ` <div> <div style="margin: 10px; padding: 20px; background: rgba(0,0,0, 0.5);"> row component: {{rowData.text}} <div class="column" v-for="(column, index) in columns"> <column-component column-data="abc" :uniqueId="column.uniqueId"></column-component> </div> <div style="clear: both;"></div> <div style="margin-top: 35px;"> <button @click="addColumn()">add column</button> </div> </div> </div>` }) new Vue({ el: '#app', template: ` <div> <div v-for="(row, index) in rows"> <row-component :uniqueId="row.uniqueId" :row-data="row" :key="row.uniqueId"></row-component> <button @click="deleteThisRow(index)">remove row</button> </div> <button @click="addRow()">add</button> </div> `, data: { rows: [], rowCount: 0 }, mounted: function() { this.addRow() this.addRow() this.addRow() }, methods: { addRow() { var row = new Object() row.uniqueId = 'row-' + this.rowCount row.text = 'row-'+(this.rows.length) this.rows.push(row) this.rowCount = this.rowCount + 1 }, deleteThisRow: function(index) { this.rows.splice(index, 1) console.log(this.rows) } } })

Is it possible to do the following?

export default { props: ['parentArray'], data () { return { computedArray: null } }, computed: { computedResult: function () { var flags = [] var output = [] var l = this.parentArray.length var i for (i = 0; i < l; i++) { if (flags[this.parentArray[i].myitem]) continue flags[this.parentArray[i].myitem] = true var firstfilter = this.parentArray[i].myitem.replace('something', '') output.push(firstfilter) } return output } }, mounted () { this.computedArray = this.computedResult }

When I try, the structure of my array makes it to the data element, but none of the data (at least not in the vue dev-tools. The computed array properly shows up in computed)

The title is just a simple intro to what the real problem is, basicly i have a dashboard with a lot of elements (example: table, paragraph, heading) this elements are respective to a construction of a docx document.

Everytime i click one of these elements i open a new modal, where i can change some parameters in order to create the element, for example with paragraph i can change his alignment, color and text.

When i click to add this element it is added to a section in my page as a block and i should be able to change the properties of each block by clicking above the block.

I want to open a new modal(something like the modal when i open in the dashboard, with the difference instead of adding, to edit).

My problem is that i don't know what is the best way to do this without having messy spaghety code.

At the moment i am building it this way:

i have the dashboard component that is like this:

<template> <div class="navbar navbar-custom navbar-fixed-left navSize"> <form class="navbar-form margin-above" role="search"> <div class="input-group add-on"> <input class="form-control" placeholder="Search" name="srch-term" id="srch-term" type="text"> </div> </form> <h4 class="text-center">Doc Sections</h4> <div @click="changeView('appTable')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Table</h4> </div> </div> <div @click="changeView('appParagraph')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Paragraph</h4> </div> </div> <div @click="changeView('appImage')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Image</h4> </div> </div> <div @click="changeView('appBulletList')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Bullet List</h4> </div> </div> <div @click="changeView('appHeading')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Heading</h4> </div> </div> <div @click="changeView('appBreak')" class="card card-color"> <div class="card-block"> <h4 class="card-title text-center">Break</h4> </div> </div> </div> </template> <script> export default { data() { return { text: "", fontSize: 14, key: "Paragraph", paragraph: {}, } }, methods: { addParagraph() { this.$set(this.paragraph, 'key', this.key); this.$set(this.paragraph, 'text', this.text); this.$set(this.paragraph, 'fontSize', this.fontSize); this.$store.commit("appendToDocument", this.paragraph) }, changeView: function (view) { this.$store.commit("changeCurrentView", view); this.show(); }, show() { this.$modal.show('modalSection'); }, hide() { this.$modal.hide('modalSection'); }, hey() { console.log("HEY"); } }, } </script>

the change view sends to vuex the new component that should render the modal, i have this at vuex store:

currentView: 'appTable', changeCurrentView: (state, view) => { state.currentView = view; },

in my create file template is the place where i render the component that i click, like this:

<modal name="modalSection"> <component :is="getView"> </component> </modal> computed:{ getView(){ return this.$store.getters.getCurrentView; } },

again, i access vuex for the currentView clicked and change the component rendered. In this page i also load the components to be displayed but i think the important part about how it works is already showed, each component has its own properties inside, for example Table is 1 component with his properties inside it, like(number of rows, columns).

Do i need to pass all this properties from all my components to vuex? so i can edit them in other component. Or is there a better way?

Thank you guys