monteecristoo’s blog

https://twitter.com/irakaarozo

Vuejs

VueJS: List rendering した item を削除

<div v-for="(item, index) in items"> <button @click="deleteItem(item, index)"> data() { return { items: ['test', 'hi', 'hey'] method: { deleteItem(item, index) { axios.post('delete', item) { // server 側にデータをpost } this.items.splice(index, 1) // client 側のlist を更新 さらに list rendering が component を利用</button></div>…

Vuetify: vue-dialog で dialog が閉じられた際、イベントを発火したい

updated: 2019/3/22 <v-dialog v-model="dialog" @close="close"> ** dialog に input を含む場合は@input="close" methods: { close() { console.log("closed") }, ref: vuejs.org github.com</v-dialog>

VueJS + Konva vue-konva を使わずに konva を取り入れる

vue-konva の transform がモバイルに対応していなかったので。。。 <template> <div id="some-component"> </div> </template> <script> import Konva from 'konva' export default { mounted() { let stage = new Konva.Stage() error: Konva is undefined </script> import {Konva} from 'konva' error: Stage is undefined ----…

Laravel 5.6 + VueJS add jquery globally

jquery を vue component のどこからでも使えるようにする 参考: stackoverflow.com //

VueJS Routing に何らかのパラメータをつけたい

vue-router の meta が便利 これで $route.meta.profile に値が付くので v-if="this.$route.meta.profile" 等でブラウザバックにも対応した routing ごとの conditional rendering ができて便利 //

VuetifyでComputed property “drawer” was assigned to but it has no setter 等エラーが発生したら・・・

updated: 2018/9/13 Navigation-drawerを子componentで使用したいため、default の data: drawer を親子間で共有したいため、 mixinを使ってcomputed: {drawer: true} で共有した。 すると下記のエラー Computed property “drawer” was assigned to but it h…

Laravel blade template と VueJS の連携 blade template 内の vue component にデータをパスしたい

updated: 2018/9/5 blade template 内の vue component にデータをパスしたい場合 例えば authHome.blade.php / guestHome.blade.php の二つに共通で PageBody.vue という vue component を使うとき、Laravel 側で Auth::checkして得た情報を PageBody にパ…

Laravel-Mix issue: vue-loader のバージョンをアップグレードしたら vue-loader was used without the corresponding plugin. Make sure to include VueLoaderPlugin in your webpack config. 等、大量のエラーメッセージ

laravel-mix@2.1.11 vue-loader@15.3.0 vue-loader を @14.2.2 から @15.3.0 にアップでしたらエラーが発生 solution: webpack.mix.js にプラグインを適用 let mix = require('laravel-mix'); const VueLoaderPlugin = require('vue-loader/lib/plugin') mix…

VueJS 子コンポーネントに値をパスするときの謎の挙動

responseは[{prop1: {}, prop2: {}}, {prop1: {}, prop2: {}}] とする messages ではこのresponse をすべて格納して modifiedMessages ではprop2を削除して格納したい。 @messages.vue 親コンポーネント <app-messages v-for="message in messages" m=message key=message.id > mounted() { axios.get('getMessages').then(respons</app-messages>…

VueJs: method 内で setTimeout を使い setTimeout 内で他に定義した method を呼び出す方法

methods: { testFunc() { console.log('OK'); } }, mounted() { setTimeout(function(){ this.testFunc(); // エラー }, 1000); } this.testFunc() だとエラー。以下に訂正 mounted() { var self = this; setTimeout(function(){ self.testFunc(); // OK },…

Vuejs: $ref で得たデータを孫以降のcomponentと共有する方法

computed: { swiper() { return this.$refs.swiper.swiper },} この swiper を孫以降の component で共有したい場合 provide - inject >>> provide は data, method しか共有できない mixin >>> this.$refs が使えない Vuex の state で共有 >>> 〇 親 compo…

Vuex の actions の名前の付け方

大規模開発のため vuex の store.js をモジュール化すると各 component から vuex の action をインポートした際、action がどこのモジュールに含まれているかわからなくなってくる。 @store.js import Vue from 'vue'; import Vuex from 'vuex'; import act…

VueJs データの共有 between parent and child components

親子ならprops で可能だが、孫などには provide, injection を使う vuejs.org ただし共有できるのは data, method で computed はできない。 The provide options allows us to specify the data/methods we want to provide to descendent components. では…

Laravel + VueJS : VueJS component 内のどこからでも jquery を使用できるようにする Laravel Mix

updated: 2018/5/2 この記事は検証途中で内容が不正確 方法1 Laravel Mix から @webpack.mix.js let webpack = require('webpack'); mix.webpackConfig({ plugins: [ new webpack.ProvidePlugin({ $: 'jquery', jquery: 'jquery', window.jquery: 'jquery' …

vueJs responsive screen switcher

// updated: 2018/4/27 vueJS でスクリーンサイズに応じて処理を切り替えたい場合に関して過去に書いた記事のフォローアップ monteecristoo.hatenablog.com 上記方法だとリロードごとには適用されるが例えばタブレットの縦横を回転させたときなどには適用さ…

Laravel + VueJS multi vue files loading

// @webpack.mix.js mix.js('resources/assets/js/app.js', 'public/js') .js('resources/assets/js2/app2.js', 'public/js'); @resources/assets/js/app.js app.js に実装したい routing, components を読み込むconst routes = [ { path: '/user/:id', comp…

vue-awesome-swiper で swiper を二つ使用し、かつ swiper-container を入れ子にした場合の swiper 同士の干渉エラー

updated: 2018.11.14 サイドメニュー - メインページ ---- swiper 1 [メインページ内] コンテンツ1 - コンテンツ2 - コンテンツ3 ---- swiper 2 swiper 2 が swiper 1 の中に入れ子になっている場合、swiper2 の swiper-slide-prev が swiper 1 に干渉…

vue-loader を v13.0.0 以降にアップデートしたら "Failed to mount component: template or render function not defined"

// vue-loader を v13.0.0 以降にアップデートしたら "Failed to mount component: template or render function not defined" vue-loader@13.0.0 以降 ES module が default で true になっているため、古い CommonJS でエラーが発生 solution: // before c…

Noty installation with Laravel + Vue.js App

npm install noty --save @resources/assets/js/bootstrap.js window.noty = require('noty'); @app.blade.php <script> @if(Session::has('success')) new noty({ type: 'success', layout: 'bottomLeft', text: '{{ Session::get('success') }}' }); @endif </script> -----…

要検

computed: { hoge() { return $store.state.hoge } }, Vuex の state は method で hoge.foo などで値を参照できない

Vue.js Lifecycle

#74

Vue.js within Laravel 5.x

Laravel 内の Vue.js vue-loader@13.0.4にアップデートすると [Vue warn]: Failed to mount component: template or render function not defined. とエラーが出るので vue-loader@12.2.2 を使用(要検証) yarn add vue-loader@12.2.2

Vue.js  computedへのアクセス

computed() Computed properties are defined as no-argument functions 参考: stackoverflow.com computed同士なら this.foo で定義した computed 同士で値にアクセスできる computed: { loadedUser() { return this.$store.getters.loadedUser(this.$route…

Vue.jsのcomputedにgettersを使用した時のconsole上のエラー

// ある関数の引数にcomputedしたloadedUserを使用 <img :src="getUserPic(loadedUser.avatar)"> computedにgettersであるloadedUserを使用 computed() { loadedUser() { return this.$store.getters.loadedUser(this.$route.params.userName); } } gettersでのloadedUser // loadedUsers に読み込んだ …

Vue.js: share funcitons and data etc each component -- Mixin

@someMixin.js export const someMixin = { data() { return { }, methods: { }, computed() { } @someComponent.vue import { someMixin } from './someMixin'; export default { mixins: [someMixin] } #174 global mixin はすべてのsingle vue instance …

Vue.js toggle css classes

bind single class bind object to manage multi css classes <script src="https://unpkg.com/vue"></script><div id="app"> <div class="demo" @click="attachRed = !attachRed" :class="divClasses"> </div> <div class="demo"></div> <dv class="demo"></dv> </div> new Vue({ el: '#app', data: { attachRed: false, }…

Vuex state management

state data をとどめておく場所。どの component からも this.$store.state.hoge からアクセス可能 getters state を加工したい場合使用。同じ加工を複数の component で使用したい場合、code の duplicate を防ぐ。どの component からも this.$store.gette…

vue-awesome-swiper でメニューバーをstickyに表示したい

// updated: 2018/2/21 vue-awesome-swiperはflexboxを使っている。 cssに追加 .swiper-wrapper { display: flex !important; align-item: flex-start; } →→ フレックスボックスの上端をそろえる .swiper-container { overflow: visible !important; } →→ デ…

metismenu + vueJs スクリーンサイズに応じて切り替えたい場合

// updated: 2018/4/25 metismenu ・・・ class metismenuが複数あると2つ目がエラー??? 大画面ではサイドに固定されたmetismenuが使いたい モバイルではスワイプでmetismenuを使ったサイドバーを表示させたい 2種類のサイドバーを用意して画面サイズごと…

Laravel blade template でVueを使うときの注意 稀なエラー

blade templateで@section('hoge')を設定したのち、 vue側のapp.jsでvueをinjectするタグを以下のように同じ<hoge>に設定すると… Vue.component('hoge', require('./componets/Hoge.vue')); エラー(コンソールにもコンパイル時もエラーが表示されない)でvueが表示</hoge>…