【JavaScript】条件(三項)演算子（if文の省略形）と真偽値の切り替え - QiitaHelp us understand the problem. What are the problem?
Vuejs CLIにて一部を外部htmlファイルを読み込んで実装する方法 - Qiita
Vuejs CLI環境下で一部をhtmlで実装したい時 Vuejs CLIでvue拡張子のファイル内で一部をhtmlファイルを読み込んで実装したい時がある方、 その方々に、試行錯誤を経て分かった方法を共有します。 参考 Vue.jsで外部HTMLファイルをinclude(っぽく)する 環境の整理 開発環境：Vuejs CLIでインストールしたばかりの環境 ##方法 Vuejs CLIをインストールする。 HelloWorld.vueが生成される、その中を以下のように変更。 <template> <div class="hello"> <p>Practice</p> <div v-html="htmlContent"></div> </div> </template> <script> export default { name: "HelloWorld", data() { return
Vue.js: チェックボックスのイベントにはclickではなくchangeを使う - Qiita
<template> <ul> <li v-for="(item, idx) in items" :key="idx"> <label> <input type="checkbox" v-model="item.checked" @click="clicked(item)"> {{item.name}} </label> </li> </ul> </template> <script> export default { data() { return { items: [ { name: 'foo', checked: true }, { name: 'bar', checked: false }, { name: 'baz', checked: false } ] }; }, methods: { clicked(item) { console.log("clicked"); conso
Vue(Nuxt.js)でEnterで送信、Shift+Enterで改行の機能を実装する【textarea,input】 - Qiita
<template> <div> <p>送信:</p> <p>{{ sendMessage }}</p> <textarea v-model="message" @keydown.enter.exact="keyDownEnter" <!--enterをkeydownした時のイベント--> @keyup.enter.exact="keyUpEnter" <!--enterをkeyupした時のイベント--> @keydown.enter.shift="keyEnterShift" <!--enterとshiftをkeydownした時のイベント--> ></textarea> </div> </template> <script lang="ts"> import Vue from 'vue' export default Vue.extend({ data() { return { mess
vue.js 動的にタイトルを変更 - Qiita
var routes = [ { path: '/hoge/', component: () => import('./components/Hoge.vue') , meta: {title: '美味しいよ'} }, ]; const app = new Vue({ data () { return { title: 'へるぴーはママの味', }; }, methods: { //ページのタイトルを生成 //へるぴーはママの味 | 美味しいよ ができあがる pageTitle(to){ if(to.query.metaTitle){ var setTitle = to.meta.title + ' | ' + this.title; document.title = setTitle; } else { // タイトルを設定 if(to.meta.title){ var setTitle
Vuexでstoreのstateを初期化する - Qiita
はじめに Vuexを使用しているとき、ログアウト処理などでstoreのstateを初期状態に戻したいことがあると思います。いくつかやり方はあると思うのですが、私が手軽だと思った情報を記載します。 方法 こんな感じです。実際に利用する際はactionsなどから呼び出すことになると思いますが、ここでは最低限のコードのみ記載しています。 こちらを参考にしました。参考というよりそのまま持ってきただけですが。。 // stateの初期値としたい任意のデータを定義する function getDefaultState() { return { idToken: null, uid: null } } // stateを初期化する export const state = getDefaultState() export const mutations = { // stateを初期化するmutatio
Vue.jsでページ離脱前に確認ダイアログを出す - Qiita
編集中のものがあったりして、保存されませんが、続けますか？という確認をするあれです。 Nuxt.jsで書きます。 ブラウザを閉じたり、リロードしたりしたとき export default { created () { window.addEventListener("beforeunload", this.confirmSave); }, destroyed () { window.removeEventListener("beforeunload", this.confirmSave); }, methods: { confirmSave (event) { event.returnValue = "編集中のものは保存されませんが、よろしいですか？"; }, } }
Vueのkeydown.enterで日本語入力中は無視するようにする - くらげになりたい。
Vueのキーイベントで@keydown.enterを設定すると、 日本語の変換中に押したEnterでも発火してしまう。。 なにも変換後のみに発火させたいなと思ったときの備忘録 日本語入力中とそうでないときはkeyCodeが違うらしい Qiita記事にすべて書いてあった。。 @keyup.enter だといずれのEnterもkeyCode = 13を返してしまうが、 @keydown.enterであれば日本語入力中のEnterはkeyCode = 229を返すので、 @keydown.enterで判断すれば良い。 自分用にTSに書き直すとこんな感じ。 <template> <input @keydown.enter="onKeydownEnter($event.keyCode)"> </template> <script lang="ts"> import { Component, Vue
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
vue.js truncate - Qiita
Vue(Nuxt.js)でTopへ戻るボタンを実装する方法【ライブラリ使用無し】 - Qiita
Vue(Nuxt.js)でチャット機能を実装する5つのパターン - Qiita
Vueで外部のJavaScriptソースを<script>タグで読み込む - Qiita
【Vue.js】Vue CLI でタブ機能を作る（動的コンポーネント） - Qiita
Vuexでシステム日時をリアクティブに ＋ Vuexプラグイン自作時の注意点 - Qiita
VuexのdispatchでAPI通信のPromiseを受け取る - Qiita
【Vue】ローカル環境でのポート番号の変更 - Qiita