質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1048閲覧

【Vue/Nuxt/vue-keyboard】プラグインのキーボード内で指定する記号を表示させたい

aa316316

総合スコア39

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

npm

npmは、Node Packaged Modulesの略。Node.jsのライブラリ・パッケージを管理できるツールです。様々なモジュールを簡単にインストールでき、自分でモジュールを作成し公開する際にも使用できます。

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2019/05/28 03:30

前提・実現したいこと

現在vue(Nuxt)のプロジェクト内でプラグインを使用し、キーボードを表示させようとしています。

その中で、コンポーネントのpropsにクウォート'、ダブルクウォート "を渡したい(キーボード上に表示させたい)のですが、props内で以下のようなエラーが発生してしまいます。
イメージ説明
上記エラーを回避するために、vueのprops内でもエスケープなどを使用して' "を表示することはできるのでしょうか。

使用しているプラグインは以下です。
vue-keyboard
https://github.com/martywallace/vue-keyboard

なにか方法がございましたらご教授いただけますと幸いです。
よろしくお願いいたします。

発生している問題・エラーメッセージ

イメージ説明

該当のソースコード

コンポーネント部分のみ載せています。

javascript

1<vue-keyboard 2 v-if="keyboard.kiosk" 3 v-model="kiosk" 4 :layouts="[ 5 '1234567890{delete:backspace}|qwertyuiop|asdfghjkl|{shift:goto:1}zxcvbnm|{Enter:custom}', 6 '||{{}}'!#$%&()*+,-./|:;<=>?@[]^_`~{delete:backspace} 7 |QWERTYUIOP|ASDFGHJKL|{shift:goto:0}ZXCVBNM|{Enter:custom}' 8 ]" 9 :maxlength="3" 10 @custom="checkKioskError" 11/>

試したこと

最初|{}も表示できませんでしたが、ドキュメントで以下を発見しました。

You can use the pipe |, open curly brace { or close curly brace } characters in your keyboard by doubling up, e.g. <keyboard layouts="||{{}}"></keyboard> Will output a keyboard with the characters |{}.

同様の方法でもしかしたらできるかもしれないと思い試してみましたが、エラーが出てしまいました。

補足情報(FW/ツールのバージョンなど)

今回の質問に関連する部分のみ載せています。

"nuxt": "^2.4.2", "vue-keyboard": "^3.1.0",

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

'||{{}}'!#$%&()*+,-./|:;<=>?@[]^_`~{delete:backspace}|QWERTYUIOP|ASDFGHJKL|{shift:goto:0}ZXCVBNM|{Enter:custom}' ^

ここで'をエスケープしていません。\'としてみてください。

投稿2019/05/28 05:19

karamarimo

総合スコア2551

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aa316316

2019/05/28 05:32

ご回答ありがとうございます! さきほど\のエスケープを試してみたところ、無事「'」の表示ができました! ただ、ダブルクウォート「"」にも同様の記述をしてみましたが、エラーがでてうまくいきませんでした。 囲っているクウォートの問題がと思い、ダブルクウォートで囲ってみましたが、そのような書き方はできないようです(Parsing error: Unexpected end of expression.とでてしまいます) こちらに関してなにかアドバイスいただけますでしょうか。 よろしくお願いいたします。
karamarimo

2019/05/28 05:47 編集

ダブルクオートについて見落としておりました。すみません。 " ではなく &quot; とするとできるはずです(バックスラッシュは不要)。
aa316316

2019/05/28 05:57

ご回答ありがとうございます! 無事ダブルクオートも表示できました。特殊文字で表現できるんですね!! 初歩的な質問に答えていただき、ありがとうございました。 大変助かりました!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問