Your Choice JavaScript News

Vue News Sunday, May 13 Dropdown menu, Parent component, Super cool company & more…


What’s new?

  • Before editing the render() method, we need a component state super(props) – this.state = { – listOpen: false, – headerTitle: this.props.title – } – }Here we have a listOpen boolean variable for toggling the menu list and a headerTitle, which is equal to title prop.
  • prevState.listOpen – })) – }render(){ – const{list} = this.props – const{listOpen, headerTitle} = this.state – return( – div className=dd-wrapper div className=dd-header onClick={() = this.toggleList()} – div {listOpen – ?
  • FontAwesome name=angle-up size=2x/ – : FontAwesome name=angle-down size=2x/ – } – /div {listOpen ul className=dd-list – {list.map((item) = ( – li className=dd-list-item key={item.id} {item.title}/li – ))} – /ul} – /div – ) – }With a styling applied, we get the following results.
  • key = location//These two refers to the same state variable- this.state.location – – this.state[key]Likewise, the id tells which object to refer to in the location array variable.
  • Time to pass it as a prop: – Dropdown – title=Select location – list={this.state.location} – it inside the li tag: – li className=dd-list-item key={item.title} onClick={() = toggleItem(item.id, item.key)}{item.title} {item.selected FontAwesome name=check/}/liAlso, notice that I have added an icon, depending on the value of item.selected, to indicate that the item is…

Tags: dropdown menu, component, parent component, dropdown menu component, lifecycle hooks


  • Suppose you are working in a super cool company, your coworkers are great and your job is fulfilling, but your company doesn’t implement unit testing as it doesn’t see any benefit from a business point of view.
  • As the title asks, how would you convince your company unit tests are beneficial?
  • Would you try to convince from a technical point of view or a business point of view?
  • It would be great to read your comment!!

Tags: super cool company, unit tests, company unit tests, business point, bit easier listening


  • Vue.js Top 10 Articles for the Past Month (v.May2018)For the past month, we ranked nearly 1,000 Vue.js articles to pick the Top 10 stories that can help advance your career (1% chance).
  • Tweet of the monthTopics in this list: Invoicing App, Nuxt.js, Transitions, CLI 3, Youtube Clone, Methods, Computed, Watchers, E-Commerce App, ParcelWatch Vue.js Monthly Top 10 on Github and get email once a month.As an article ranking service for professionals, we take quality very seriously and make sure each article you…
  • This is a competitive list and youll find the experience and techniques shared by the Vue.js leaders useful.
  • Course of the month: – A) Beginners: Vue JS 2The Complete Guide (incl.
  • [13,879 recommends, 4.8/5 stars] – B) Firebase: Build Web Apps with Vue JS 2 Firebase.

Tags: Vue JS, Build Web Apps, best daily articles, Vue Router, Mybridge AI


  • Our team enjoys working closely with you, to help come up with appropriate content for your site.
  • Our teams content writing skills ranges from mastering of different writing styles to being original in whatever we write.

Tags: web design, full-service web solution, digital marketing, Firm Web Design, web design platforms


  • The plugin does not modify the source data array.
  • Every time permutation is performed you will get a new sorted array in event .
  • The same works for removing elements, you will get a new cleaned array in your `@remove event handler.
  • Currently there is no way to extend data array after event handling.
  • Import it in your project globally – – You can set the data your would like to be sorted as seen below: – – For available events & props please click here.

Tags: source data array, new sorted array, Vue.js application development, latest Vue.js news, Vue-powered static site


Top Vue Courses

Vue JS 2: From Beginner to Professional (includes Vuex) (1,798 students enrolled)

By Bo Andersen
  • How to build advanced Vue.js applications
  • How to build single page applications (SPA)
  • Understand the theory and how Vue works under the hood
  • How to manage state in large applications with Vuex
  • Communicating with servers with HTTP
  • Use modern tools for developing and building applications (e.g. webpack)

Learn more.


Vue JS 2 - The Complete Guide (incl. Vue Router & Vuex) (38,295 students enrolled)

By Maximilian Schwarzmüller
  • Build amazing Vue.js Applications - all the Way from Small and Simple Ones up to Large Enterprise-level Ones
  • Understand the Theory behind Vue.js and use it in Real Projects
  • Leverage Vue.js in both Multi- and Single-Page-Applications (MPAs and SPAs)

Learn more.


The Ultimate Vue JS 2 Developers Course (3,882 students enrolled)

By Anthony Gore
  • Understand all Vue concepts from beginner to advanced
  • Build three real world applications using Vue.js utilising every Vue feature
  • Use the Vuex statement management library
  • Write basic Vue with ES5 and also modern Vue with ES6
  • Setup VueJS environment with development tools including Webpack
  • Create a universal application with server-side rendering
  • Use popular plugins from the Vue ecosystem like vue-router and vue-resource
  • Cutting-edge features like Single File Components, Render functions and Server-Side Rendering

Learn more.


Vue JS 2.0 - Mastering Web Apps (52,495 students enrolled)

By David Katz
  • Build entire Vue JS, VueRouter, and Vuex applications from scratch.
  • Develop apps that deal with APIs and web requests.
  • Create web apps with a full authentication service, and real-time database.

Learn more.


Learn by Doing: Vue JS 2.0 the Right Way (1,437 students enrolled)

By Dejan Stošić
  • Build your own VueJS application of any size
  • Plan and structure your project
  • Write maintainable code
  • Use smart development tools like vue-cli

Learn more.