【Vue.js】要素の枠線をマウスで掴んでサイズ変更する

はじめに

要素の枠線をマウスで掴んでサイズ変更するやり方をメモします

【Vue.js】無限スクロール処理

ライブラリ公式ページ

https://peachscript.github.io/vue-infinite-loading/

ライブラリインストール

1
npm install vue-infinite-loading -S

コンポーネント登録

main.js

1
2
3
4
5
6
7
import InfiniteLoading from 'vue-infinite-loading'
Vue.use(InfiniteLoading, {
slots: {
noResults: '',
noMore: ''
}
})

HTML コード

1
2
3
4
5
6
<template>
<div>
<div v-for="hoge in hoge_list"></div>
<infinite-loading ref="infiniteLoading" spinner="bubbles" v-on:infinite="infiniteHandler"></infinite-loading>
</div>
</template>

JavaScript コード

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
infiniteHandler() {
if (/* 無限するロールする条件 */) {
this.get_news_list();
} else {
console.log("無限スクロール完了")
this.$refs.infiniteLoading.stateChanger.complete();
},
},

async get_news_list() {
const params = {
page: this.page,
};
const res = await this.gm_api_get("news", params)
this.page += 1;
this.$refs.infiniteLoading.stateChanger.loaded();
}

this.$refs.infiniteLoading.stateChanger.reset();で初期化できます

【Vue】inputのv-modelの値を0以上に制限する方法

input の v-model の値を 0 以上に制限する方法をメモします

filter だと表示上は制限できますが実際の値は制限できないんですよね

コツとしては v-model を使うのではなく、:value@change に分けることですね

分かってしまえば簡単ですが微妙にハマったので一応メモしておきます

1
2
3
4
<div>
<label>test label</label>
<input type="number" :value="hoge" @change="min($event.target.value)" />
</div>
1
2
3
4
5
6
7
8
methods: {
min(val) {
if (val < 0) {
this.hoge = 0;
} else {
this.hoge = val;
}
},

Vueサイトにgoogle analyticsを埋め込むシンプルな方法

はじめに

Vue サイトに google analytics を埋め込んだのでメモします
めっちゃ簡単です。

【Vue.js】LocalForageを導入してみた

はじめに

Vue.js プロジェクトに LocalForage を導入してみたので手順をメモしておきます。

【node-forge】Maximum call stack size exceededエラーの原因【vue-i18n】

はじめに

表題のエラーが発生して原因特定にかなり手こずったのでメモしておきます

【Vue.js】後ろの要素のクリックイベントを発生させないようにする方法

一瞬なのでコードだけ載せます

1
2
3
4
<!-- 修正前 -->
<div @click="hoge()"></div>
<!-- 修正後 -->
<div v-on:click.stop="hoge()"></div>

参考
https://vuejs.org/v2/guide/events.html

知ってれば一瞬なのですが、知らなかったので少しハマりました、、

以上です。

【Vue】「$attrs is readonly.」エラーの解決策

はじめに

bootstrap-vue を導入すると[Vue warn]: $attrs is readonly.というワーニングがコンソールに表示されるようになったので
解決策をメモしておきます。

electron-vueのテンプレートのvuexの初期エラーの解決策

はじめに

electron-vue のテンプレートに vuex が入ってますがその使い方にクセがあったのでメモしておきます

【Vue.js】ON/OFF スイッチを CSS で自作してみた。

はじめに

ON/OFF スイッチを CSS で自作しました。
コピペで動きます。

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×