Vue.js

【Vue.js #1 Advent Calendar 2017】Vue.js + Element でフォームダイアログをいい感じに呼び出す【24日目】

Vue.js #1 Advent Calendar 2017 24日目の記事になります。 少し前に Electron + Vue.js + Element でネイティブアプリの開発を行っていたのですが、その時に利用したコードなどを簡単に紹介してみようかと思います。 Element とは Element(element-ui) とは…

Vue で親の値が変わったら子コンポーネントも更新する

Vue で親が子コンポーネントに対して値を渡す場合、以下のように props を介して渡します。 index.html <script type="text/x-template", id="child"> <div> <input v-model="message"> <a>Child message is: {{ message }}</a> </div> </script> <div id="example"> <input v-model="message"> <a>Parent message is: {{ message }…</a></div>

element-ui の tree コンポーネントでノードのレンダリングをカスタマイズする

かなりマイナーなネタですが、element-ui の tree コンポーネントで表示されるノードをカスタマイズしてみたいと思います。 環境 Vue.js : v2.4.4 element-ui : v1.4.6 コード HTML <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://unpkg.com/element-ui@1.4.6/lib/theme-default/index.css"> </head> <body> </body></html>

Vue.js + UIkit でアイコンが2つ表示される場合の対処方法

Vue.js + UIkit でアイコンを表示させようとしたら2つ表示される事があったので対処方法を覚書。 再現する環境 Vue : 2.4.4 UIkit : 3.0.0 beta 30 jQuery : 3.2.1 再現コード <html> <head> <title>Welcome to Vue</title> </head></html>