Software

I'm creating a small Vue Plugin that allows a user to add a "page notification" from within any component. I've successfully implemented something like:

this.$notifications.add("a message");

And it works! But I've had to register the mutations and actions required for my plugin to work as part of the file that sets up the rest of the store for my app:

export default new Vuex.Store({...})

Is there a way to add actions and mutations to my store from within my plugin? It currently looks like this:

import vuex from './../store'; const MyPlugin = { install(Vue, options) { // 4. add an instance method Vue.prototype.$notifications = { notificationTypes: { 0: "warning", 1: "info" }, add: function (options) { let id = "page-notification-" + (vuex.state.pageNotificationsCreated + 1); let message = options.message || options || "no message"; let notificationType = this.notificationTypes[0]; if(options.notificationType && Number.isInteger(options.notificationType)){ // Map int to string type notificationType = this.notificationTypes[options.notificationType] || notificationType; }else{ // Or use string we were provided ;) notificationType = options.notificationType; } let notification = { id: id, message: message, notificationType: notificationType }; vuex.dispatch('addNotification', notification); } } } }; export default MyPlugin;

Any and all help appreciated!

I have a web app using Webpack and Vue.js. It works perfectly on most of the browsers. However Safari can't find build.js.map, which is not in the directory, and I do not include it anywhere.

Can anyone explain why is it looking for it?

I am new to both vue.js and vuex. I have a component that need to dispatch an action when a specific data is available in the state. How can I do this.

Thanks

I'm new to vue.js so I know this is a repeated issue but cannot sort this out.

the project works but I cannot add a new component. Nutrition component works, profile does not

My main.js

import Nutrition from './components/nutrition/Nutrition.vue' import Profile from './components/profile/Profile.vue' var Vue = require('vue'); var NProgress = require('nprogress'); var _ = require('lodash'); // Plugins Vue.use(require('vuedraggable')); // Components Vue.component('nutrition', Nutrition); Vue.component('profile', Profile); // Partials Vue.partial('payment-fields', require('./components/forms/PaymentFields.html')); // Filters Vue.filter('round', function(value, places) { return _.round(value, places); }); Vue.filter('format', require('./filters/format.js')) // Transitions Vue.transition('slide', {enterClass: 'slideInDown', leaveClass: 'slideOutUp', type: 'animation'}) // Send csrf token Vue.http.options.headers['X-CSRF-TOKEN'] = Laravel.csrfToken; // Main Vue instance new Vue({ el: '#app', components: { }, events: { progress(progress) { if (progress === 'start') { NProgress.start(); } else if (progress === 'done') { NProgress.done(); } else { NProgress.set(progress); } }, 'flash.success': function (message) { this.$refs.flash.showMessage(message, 'success'); }, 'flash.error': function (message) { this.$refs.flash.showMessage(message, 'error'); } } });

Profile.vue

<template> <div class="reddit-list"> <h3>Profile </h3> <ul> </ul> </div> </template> <script type="text/babel"> export default { name: 'profile', // this is what the Warning is talking about. components: { }, props: { model: Array, } } </script>

profile.blade.php

@extends('layouts.app') @section('title', 'Profile') @section('body-class', 'profile show') @section('content') <script> window.Laravel.profileData = [] </script> <profile></profile> @endsection

Whenever I try to go to this page I get:

[Vue warn]: Unknown custom element: <profile> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

I tried doing a local component such as

Vue.components('profile', { template: '<div>A custom component!</div>' });

or even I tried adding the profile into the components in vue but still no luck, can anyone point me in the right direction?

I have a db table of sport events. Each event has a year, event name and an event winner.

My admin view for this table allows the events to be grouped by year and inserted in bulk (generally 8 sports events rows at once). I have a table, written in Vue that allows up to 8 sports events rows to be added to the interface, fields populated and submitted. This works well.

The method for this is

public function storeMultiple(Request $request) { $year = $request->year; $newEvents = $request->events; foreach ($newEvents as $key => $value) { DB::table('sport_events')->insert([ 'team_id' => 1, 'sort_order' => $value['sort_order'], 'year' => $year, 'event' => $value['event'], 'winner' => $value['winner'], 'created_at' => Carbon::now(), 'updated_at' => Carbon::now() ]); } }

While I know it's not a great way (the db structure limits me here rather than having year be the key and sport events within) and for such a small and infrequent use case, I'm happy with the performance trade off.

The form is submitted to my route via Axios and everything lands in the database as I'd expect.

Now I'm looking to add validation to the method, ensuring that each event has event name and the winner.

$validator = Validator::make($request->all(), [ 'year' => 'required', 'events.*' => 'required', ]); if ($validator->fails()) { return response()->json([ 'errors' => $validator ]); }

It seems that my submit bypasses the validation checks that I have in place, getting a success status.

My Vue submit method does this

submit () { axios({ method: 'post', url: '/admin/sports', data: { year: this.year, sports: this.sports } }).then((response) => { window.location.href = '/admin/sports' }).catch((error) => { // error }) }

Where am I going wrong in this method?

I'm using the vue-cli with webpack-simple and it has sass integration out of the box. In fact, I can run my own sass without any issues. For example, below works:

<style lang="sass"> #app background: red </style>

The following blocks of code produce the same error:

<style lang="sass" src="bulma"></style>

and

<style lang="sass"> @import 'bulma' </style>

Here's the error:

Module parse failed: /Users/johnbriggs/Code/petiq-vue/node_modules/bulma/bulma.sass Unexpected character '@' (1:0)

Seems like the built in parser can't handle the @ symbol setting the charset. Any thoughts? I'd like to use this through npm without copy/pasting and removing all the @ symbols.

Using v-for, I am looping through a component. The component is for each client. In this component, I have same form for each client and when a select value is selected for the first component (client 1), I want to select this value for every client.

Do I need to pass the data to the root and create a single source of truth variable?

I tried setting up a basic version:

<div id="app"> <my-comp v-for="x in 2" v-bind:val="x"></my-comp> </div> Vue.component('my-comp', { props: ['val'], template: ` <div> <div> <label>Status</label> <select :data-client="val" @change="statusChanged"> <option selected="" disabled="" value="0"></option> <option value="xxx">Xxx</option> <option value="yyy">Yyy</option> <option value="zzz">Zzz</option> </select> </div> </div> `, methods: { statusChanged(e) { var client = e.target.getAttribute('data-client') if (client == 1) { alert('set same value for client 2') } } } }) new Vue({ el: '#app', })

Here is a fiddle: https://jsfiddle.net/w53164t2/

I have the following code that I'm using to render messages between 2 users

<template> <main> <form action="" method="post" @submit.prevent="sendMessage"> <textarea name="message" id="message" cols="30" rows="10" placeholder="Message"> </textarea> <input type="submit" value="Send"> </form> <section v-if="messages.length"> <div v-for="message in messages"> {{message.body}} <hr> </div> </section> <section v-else> No messages </section> </main> </template> <script> import ajax from './ajax'; export default { data () { return { messages: [] } }, methods: { sendMessage(e){ }, getMessages(pageNum, cb){ ajax({ url: `${window.location.pathname}?p=${pageNum}`, method: 'get', callback(res){ cb(JSON.parse(res)); } }) } }, created(){ var vm = this; vm.getMessages(1, (res) => { vm.messages = res.data; vm.loaded=true; }); } } </script>

Specifically the code v-for="message in messages", the message property in my component. These messages will be read only so there will be no event listeners or anything. So it will not be the best way to keep them in array after the ajax call. However, there will be a load more button that loads 10 messages in a call and those will be appended to array.

So I want to ask how do I go about this without keeping the messages in array after rendering but still keeping them on the page? Or if you can suggest a better, efficient, way to implement this, I will appreciate it.

Thanks.

I am trying to manipulate data which is coming in an array like this

[ { "level_id": 1, "level_name": "1", "level_image": "", "task_name": "game" }, { "level_id": 1, "level_name": "1", "level_image": "", "task_name": "taskgame" }, { "level_id": 1, "level_name": "1", "level_image": "", "task_name": "jenga" } ]

I want to convert the data into this

[ { "level_id":1, "level_name":"1", "level_image":"", task_name[ "task_name":"game", "taskgame","jenga" ] } ]

I've created a modal component in Vue JS. It has to display all the names typed in the form. It doesen't work. What I can do to solve this problem? I'm new in Vue JS. Also I can't use shorthands. Do you know why? PLease help me. Thank you in advance. This is my code:

<template> <div class="template_class"> <div> <b-btn v-b-modal.modal1>Launch demo modal</b-btn> <!-- Main UI --> <div class="mt-3 mb-3"> Submitted Names: <ul> <li v-for="n in names">{{n}}</li> </ul> </div> <!-- Modal Component --> <b-modal id="modal1" title="Submit your name" @ok="submit" @shown="clearName"> <form @submit.stop.prevent="submit"> <b-form-input type="text" placeholder="Enter your name" v-model="name"></b-form-input> </form> </b-modal> </div> </div> </template> <script> export default { data: { name: '', names: [] }, methods: { clearName() { this.name = ''; }, submit(e) { if (!this.name) { alert('Please enter your name'); return e.cancel(); } this.names.push(this.name); this.name = ''; } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> </style>

I'm stuck at a crossroads with a component I am working on.

I have the following component "RecentUpdates"

Within it I am passing props down to a few other components, as you can see from the top of the file.

My problem is when adding a new post, I can not figure out how to get the correct update object array back and i also can not figure out the correct 'Vue way' to update the data prop that is being passed down to the "PostList" component.

<template> <div> <PostFilter v-on:selectedCategory="getSelectedPosts" v-on:showAllPosts="showAllPosts" :user="user" :categories="categories"/> <PostList v-if="recent_posts[0]" :categories="categories" :posts="recent_posts[0]" :user="user"/> <Pagination v-on:getPreviousPage="getPreviousPage" v-on:getNextPage="getNextPage"/> </div> </template> <script> import PostList from './PostList'; import PostFilter from './PostFilter'; import Pagination from './Pagination'; import EventBus from '../event-bus'; export default { name: 'RecentUpdates', data: () => ({ errors: [], recent_posts: [], }), props: ['categories', 'user'], components: { PostList, PostFilter, Pagination }, created() { if (this.user.meta.selected_categories[0] == 0) { this.showAllPosts(); } // do not call here, not working as expected // is switching selected category to an incorrect one // this.updateList(); this.getSelectedCategory(); }, watch: { recent_posts: function(newValue) { EventBus.$on('addPost', function(newPost) { console.log(newPost); this.$forceUpdate(); //this.recent_posts.push(newPost); //this.$set(this.recent_posts, newPost, newPost); // this.$nextTick(function () { // this.recent_posts.push(newPost); // }); }); console.log(this.recent_posts[0]); // this.$nextTick(function () { // console.log(this.recent_posts[0]) // => 'updated' // }); // if (this.user.meta.selected_categories[0] == 0) { // EventBus.$on('addPost', this.showAllPosts); // } else { // EventBus.$on('addPost', this.getSelectedCategory); // } //this.updateList(); } }, methods: { // updateList() { // if (this.user.meta.selected_categories[0] == 0) { // EventBus.$on('addPost', this.showAllPosts); // //EventBus.$emit('newPost'); // } else { // EventBus.$on('addPost', this.getSelectedCategory); // //EventBus.$emit('newPost'); // } // }, getSelectedCategory() { let categoryId = this.user.meta.selected_categories[0]; this.getSelectedPosts(categoryId); }, showAllPosts() { axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]', {headers: {'X-WP-Nonce': portal.nonce}}) .then(response => { this.recent_posts = []; //this.recent_posts = response.data; //console.log(response.data); this.recent_posts.push(response.data); console.log(this.recent_posts[0]); }) .catch(e => { this.errors.push(e); }); }, getSelectedPosts(categoryId) { axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&categories=' + categoryId, {headers: {'X-WP-Nonce': portal.nonce}}) .then(response => { this.recent_posts = []; //console.log(response.data); this.recent_posts.push(response.data); console.log(this.recent_posts[0]); }) .catch(e => { this.errors.push(e); }); }, /** * Pagination methods * */ getPreviousPage(page) { axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&page=' + page, {headers: {'X-WP-Nonce': portal.nonce}}) .then(response => { this.recent_posts = response.data; }) .catch(e => { this.errors.push(e); }); }, getNextPage(page) { axios.get('/wp-json/wp/v2/posts?_embed=true&status=[publish,resolved,unresolved]&page=' + page, {headers: {'X-WP-Nonce': portal.nonce}}) .then(response => { this.recent_posts = response.data; }) .catch(e => { this.errors.push(e); }); } }, } </script> <style> </style>

How do I wrap or enclose a router-link tag in a button tag? so when I press button it routes me to the desired page.

hey guys i am using this lib, at the moment i am trying just a simple sortable, imagine i have a array with 3 elements i want to change his positions with drags, i am able to doing it at the moment. The thing is, when i swich the places my JSON array doesn't update.

I am doing this:

my list:

<draggable v-model="getDocumentAttributes"> <div v-if="value.key != 'Document'" class="panel panel-primary" v-for="(value, key, index) in getDocumentAttributes"> <div class="panel-body quote"> <span @click="removeSection(index,key)" class="pull-right glyphicon glyphicon-remove text-info"></span> <p>{{value.key}}</p> </div> </div> </draggable>

my computed prop that listen to vuex getter:

getDocumentAttributes(){ return this.$store.getters.getDocumentAttributes; }

Finaly my list and my getter function at vuex side:

state: { document: { "id": "0", "atributes": [] },

[...]

getDocumentAttributes: (state) => { return state.document.atributes; },

I am working on a vue project with VUEX state management throughout. There is actions that populate the state attributes with axios promise calls and then we call the actions in the mounted section of components so the data is populate when the component is rendered. We have an issue where things do not update dynamically or data disappears when a page is refreshed. For instance there is one function where data is added to the databases connections list but to see it on the front end you need to click in and out of the component usually twice before it updates or it also works when you add another piece of data to the database list, has anyone come across this issue and if so know how to solve it. Also we are using computed properties for the issue I have described so I don't think its there.

Code:

Vuex call:

apiTestConnection: ({ commit }, apiParameters) => { var apiMethod = '('ApiCall')' var apiUrl = apiMethod + '&parameters=' + apiParameters myHTTP.get(apiUrl) .then(response => { // console.log('me first or second'); return response.data; }) .then(data => { var passFail = data.items.testDb; var errorExists =data.error.errorMessage; var errorCode = errorExists.split(" ")[0]; var modalMessage = 'abc'; var promiseFlag = 0; } commit('setTestConnectionMessage', modalMessage); commit('setTestConnectionPromise', 1); }); }

components script where the data is called and used:

computed: { ...mapGetters([ 'getConnectionTableRow', 'getConnectionList', 'getConnectionListID', 'getAnalyticHeaderList', 'getTableData' ]), // According to Max theses actions should be in methods, If I put them there the api calls arent renered in the DOM ...mapActions([ 'apiGetConnections', 'apiGetAnalyticHeaders', 'setConnectionList' ]), connectionList: { get() { this.apiGetConnections; return this.$store.getters.getConnectionList; }, set(connectionList) { this.$store.dispatch('setConnectionList', connectionList) } }, }, mounted: function () { this.apiGetConnections, this.apiGetAnalyticHeaders }

To honor Bassel Khartabil’s legacy and his lasting impact on the open web, a slate of nonprofits are launching a new fellowship in his name

 

By Katherine Maher (executive director, Wikimedia Foundation), Ryan Merkley (CEO, Creative Commons) and Mark Surman (executive director, Mozilla)

On August 1, 2017, we received the heartbreaking news that our friend Bassel (Safadi) Khartabil, detained since 2012, was executed by the Syrian government shortly after his 2015 disappearance. Khartabil was a Palestinian Syrian open internet activist, a free culture hero, and an important member of our community. Our thoughts are with Bassel’s family, now and always.

Today we’re announcing the Bassel Khartabil Free Culture Fellowship to honor his legacy and lasting impact on the open web.

Bassel Khartabil

Bassel was a relentless advocate for free speech, free culture, and democracy. He was the cofounder of Syria’s first hackerspace, Aiki Lab, Creative Commons’ Syrian project lead, and a prolific open source contributor, from Firefox to Wikipedia. Bassel’s final project, relaunched as #NEWPALMYRA, entailed building free and open 3D models of the ancient Syrian city of Palmyra. In his work as a computer engineer, educator, artist, musician, cultural heritage researcher, and thought leader, Bassel modeled a more open world, impacting lives globally.

To honor that legacy, the Bassel Khartabil Free Culture Fellowship will support outstanding individuals developing the culture of their communities under adverse circumstances. The Fellowship — organized by Creative Commons, Mozilla, the Wikimedia Foundation, the Jimmy Wales Foundation, #NEWPALMAYRA, and others — will launch with a three-year commitment to promote values like open culture, radical sharing, free knowledge, remix, collaboration, courage, optimism, and humanity.

As part of this new initiative, fellows can work in a range of mediums, from art and music to software and community building. All projects will catalyze free culture, particularly in societies vulnerable to attacks on freedom of expression and free access to knowledge. Special consideration will be given to applicants operating within closed societies and in developing economies where other forms of support are scarce. Applications from the Levant and wider MENA region are greatly encouraged.

Throughout their fellowship term, chosen fellows will receive a stipend, mentorship from affiliate organizations, skill development, project promotion, and fundraising support from the partner network. Fellows will be chosen by a selection committee composed of representatives of the partner organizations.

Says Mitchell Baker, Mozilla executive chairwoman: “Bassel introduced me to Damascus communities who were hungry to learn, collaborate and share. He introduced me to the Creative Commons community which he helped found. He introduced me to the open source hacker space he founded, where Linux and Mozilla and JavaScript libraries were debated, and the ideas of open collaboration blossomed. Bassel taught us all. The cost was execution. As a colleague, Bassel is gone. As a leader and as a source of inspiration, Bassel remains strong. I am honored to join with others and echo Bassel’s spirit through this Fellowship.”

Fellowship details

Organizational Partners include Creative Commons, #FREEBASSEL, Wikimedia Foundation, GlobalVoices, Mozilla, #NEWPALMYRA, YallaStartup, the Jimmy Wales Foundation, and SMEX.

Amazon Web Services is a supporting partner.

The Fellowships are based on one-year terms, which are eligible for renewal.

The benefits are designed to allow for flexibility and stability both for Fellows and their families. The standard fellowship offers a stipend of $50,000 USD, paid in 10 monthly installments. Fellows are responsible for remitting all applicable taxes as required.

To help offset cost of living, the fellowship also provides supplements for childcare and health insurance, and may provide support for project funding on a case-by-case basis. The fellowship also covers the cost of required travel for fellowship activities.

Fellows will receive:

• A stipend of $50,000 USD, paid in 10 monthly installments
• A one-time health insurance supplement for Fellows and their families, ranging from $3,500 for single Fellows to $7,000 for a couple with two or more children
• A one-time childcare allotment of up to $6,000 for families with children
• An allowance of up to $3,000 towards the purchase of laptop computer, digital cameras, recorders and computer software; fees for continuing studies or other courses, research fees or payments, to the extent such purchases and fees are related to the fellowship
• Coverage in full for all approved fellowship trips, both domestic and international

The first fellowship will be awarded in April 2018. Applications will be accepted beginning February 2018.

Eligibility Requirements. The Bassel Khartabil Free Culture Fellowship is open to individuals and small teams worldwide, who:

• Propose a viable new initiative to advance free culture values as outlined in the call for applicants
• Demonstrate a history of activism in the Open Source, Open Access, Free Culture or Sharing communities
• Are prepared to focus on the fellowship as their primary work

Special consideration will be given to applicants operating under oppressive conditions, within closed societies, in developing economies where other forms of support are scarce, and in the Levant and wider MENA regions.

Eligible Projects. Proposed projects should advance the free culture values of Bassel Khartabil through the use of art, technology, and culture. Successful projects will aim to:

• Meaningfully increase free public access to human knowledge, art or culture
• Further the cause of social justice/social change
• Strive to develop both a local and global community to support its cause

Any code, content or other materials produced must be published and released as free, openly licensed and/or open-source.

Application Process. Project proposals are expected to include the following:

• Vision statement
• Bio and CV
• Budget and resource requirements for the next year of project development

Applicants whose projects are chosen to advance to the next stage in the evaluation process may be asked to provide additional information, including personal references and documentation verifying income.

About Bassel

Bassel Khartabil, a Palestinian-Syrian computer engineer, educator, artist, musician, cultural heritage researcher and thought leader, was a central figure in the global free culture movement, connecting and promoting Syria’s emerging tech community as it existed before the country was ransacked by civil war. Bassel co-founded Syria’s first hackerspace, Aiki Lab, in Damascus in 2010. He was the Syrian lead for Creative Commons as well as a contributor to Mozilla’s Firefox browser and the Red Hat Fedora Linux operating system. His research into preserving Syrian archeology with computer 3D modeling was a seminal precursor to current practices in digital cultural heritage preservation — this work was relaunched as the #NEWPALMYRA project in 2015.

Bassel’s influence went beyond Syria. He was a key attendee at the Middle East’s bloggers conferences and played a vital role in the negotiations in Doha in 2010 that led to a common language for discussing fair use and copyright across the Arab-speaking world. Software platforms he developed, such as the open-source Aiki Framework for collaborative web development, still power high-traffic web sites today, including Open Clip Art and the Open Font Library. His passion and efforts inspired a new community of coders and artists to take up his cause and further his legacy, and resulted in the offer of a research position in MIT Media Lab’s Center for Civic Media; his listing in Foreign Policy’s 2012 list of Top Global Thinkers; and the award of Index on Censorship’s 2013 Digital Freedom Award.

Bassel was taken from the streets in March of 2012 in a military arrest and interrogated and tortured in secret in a facility controlled by Syria’s General Intelligence Directorate. After a worldwide campaign by international human rights groups, together with Bassel’s many colleagues in the open internet and free culture communities, he was moved to Adra’s civilian prison, where he was able to communicate with his family and friends. His detention was ruled unlawful by the United Nations Working Group on Arbitrary Detention, and condemned by international organizations such as Creative Commons, Amnesty International, Human Rights Watch, the Electronic Frontier Foundation, and the Jimmy Wales Foundation.

Despite the international outrage at his treatment and calls for his release, in October of 2015 he was moved to an undisclosed location and executed shortly thereafter — a fact that was kept secret by the Syrian regime for nearly two years.

The post Honoring Our Friend Bassel: Announcing the Bassel Khartabil Free Culture Fellowship appeared first on The Mozilla Blog.

I have a text-field in Django I'm maintaining using Django-admin that requires preservation of white-space. As a result I'm wrapping it in a <pre> </pre> tag to do this when rendering using vueJS and vue-material.

The whitespace appears to be retained when using this method, and when looking at the descrip field of my model manually in python manage.py shell the whitespace is indeed stored in my db.

However, for some reason there is a mysterious leading white-space tab both at the beginning and end of my HTML when rendered, shown here:

And showing up in the HTML here:

Code snippets:

relevant html and css

<md-layout md-column md-flex-xsmall="100" md-flex-small="55" md-flex-medium="70" md-flex-large="80" id="summary_block"> <md-layout > <pre class="md-body"> [[ product.descrip ]] </pre> </md-layout> </md-layout> #summary_block > div.md-layout > pre { white-space: pre-wrap; word-wrap: break-word; font-family: inherit; }

Could this be a postgres issue? If so why wouldn't the whitespace show up when looking at object.descrip in the python shell?

I'm using postgres, vuejs, django v 1.10, python 3.5 and vue-material if any/all of that helps.

I'm trying to convert JSX code from example at http://element.eleme.io/#/en-US/component/tree#custom-node-content to Vue $createElement code

original code snippet:

renderContent(h, { node, data, store }) { return ( <span> <span> <span>{node.label}</span> </span> <span style="float: right; margin-right: 20px"> <el-button size="mini" on-click={ () => this.append(store, data) }>Append</el-button> <el-button size="mini" on-click={ () => this.remove(store, data) }>Delete</el-button> </span> </span>); } }

and my attempt to transform:

renderContent (h, { node, data, store }) { return h('SPAN', [ h('SPAN', [h('SPAN', node.label)]), h('SPAN', {attrs: {style: 'float: right; margin-right: 20px'}}, [ h('el-button', { attrs: { size: 'mini', on: { click: this.append(store, data) } } }, 'Append'), h('el-button', { attrs: { size: 'mini', on: { click: this.delete } } }, 'Delete') ]) ]) }

but it fails: the button Append always executed at the time of rendering for every node and never after. While button Delete is never executed at all.

So the question is how to pass an event handler with arguments properly to the created element?

I am using cornerstone to load jpeg or dicom images for slack scrolling example.

Getting base64 from jpeg and dicom, but canvas displaying image like this:

My actually image is like this

Is there any solution or suggestions?

hey guys i am trying to do a request inside my action on the vuex side, and i get this error:

Cannot read property '$http' of undefined

i set my vue-resource this way inside my main.js file:

import Vue from 'vue' import VueResource from 'vue-resource' import VueRouter from 'vue-router' import App from './App.vue' import {routes} from './routes'; import {store} from './store/store'; import VModal from 'vue-js-modal' Vue.use(VModal) Vue.use(VueResource); Vue.use(VueRouter); const router = new VueRouter({ routes }); new Vue({ el: '#app', store, router, render: h => h(App) })

then on the store:

addStyle(state,newStyleObj) { console.log(newStyleObj); var vm = this; this.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj) .then(response => { state.tableStyles = response.body; console.log(state.tableStyles) console.log(response.body) }, error => { console.log(error); }); }

any help?

I am at the beginning of Laravel and Vue and trying to build a simple dashboard application for testing purpose.

I found this fancy Vue dashboard https://github.com/epicmaxco/vuestic-admin

Is there a way to implement this in a clean and easy way into an existing laravel project? Because I am already familiar with the routing and the MVC logic in Laravel and only have a little knowledge in how to manage that in VueJS.

Or is there no point of doing this and I should only use this VueJS dashboard to build up my project from scratch?