結論 <input v-model="value"> <p v-if="value !== null"> {{ value }}です </p> <p v-else> 入力してください </p> inputの部分は入力フォームです。 Vue.jsのフォーム入力バインディングにより、{{ value }}に入力した文字が入ります。 !==は真偽値falseになるため、value=空ではない時(false)、valueが表示され、入力がない場合にv-elseが表示されます。 注意点 dataにてしっかりとvalueを定義してください。 そうしないとエラーが出ます。 私はこれでちょっとはまりました。 <script> export default { name: "HelloWorld", data: () => ({ value: null }) } </script> 参考例 <p v-if="value !== null"> <!-- {{マリオ}}の場合、ジャンプ投げ空上は{{~65%}}、２段ジャンプ空上は{{~76%}}で確定します --> {{ value }}の場合、ジャンプ投げ空上は{{ jump() }}、２段ジャンプ空上は{{ jump2() }}で確定します <p v-else> キャラを選択してください </p>

はじめに vue-cropperjsでは呼び出し時にv-bindで各オプションを設定します。 template内での記載は以下のようになります。 <vue-cropper ref="cropper" :view-mode="2" :auto-crop-area="1" :aspect-ratio="16 / 10" :min-container-width="640" :min-container-height="360" :img-style="{ 'width': '500px', 'height': '500px' }" drag-mode="none" /> 画像切り抜き時のアスペクト比を固定する 画像切り抜き時のアスペクト比を固定したい場合、 :aspect-ratio="width / height" と設定すると比率が固定されたまま切り抜きを実行できます。 16:9の画像を設定する場合、 :aspect-ratio="16 / 9" となります。 画像選択後のCropAreaを画像幅全体にする 画像を切り抜きしたい時に、画像サイズが適正でも、画像いっぱいに切り抜きウインドウが表示されていないとドラッグ&ドロップでウインドウを拡大してから確定しなくてはいけない手間がありました。 オプションで :auto-crop-area="1" を設定すると画像幅全体に切り抜きウインドウが表示されます。 設定前 設定後

目的 django_restframeworkで実装したAPIをvueからaxiosで叩くことはしたが、実務のようにJWTを利用したトークン認証を行う 実施環境 ハードウェア環境 項目 情報 OS macOS Catalina(10.15.7) ハードウェア MacBook Air (11-inch, Early 2015) プロセッサ 1.6 GHz デュアルコアIntel Core i5 メモリ 4 GB 1600 MHz DDR3 グラフィックス intel HD Graphics 6000 1536 MB ソフトウェア環境 項目 情報 homebrew 3.3.8 mysql Ver 8.0.27 for macos10.15 on x86_64 @vue/cli 4.5.15 vue 2.6.14 前提 今回の記事はこれまでの【django/vue.js初学者向け】DjangoRestFrameworkで作成したAPIをVue.jsから叩いてみると【簡単】django_restframeworkのjwt認証を最低限実装していくの続きのため、これらの記事を読まないとわからない可能性がある。 概要 JWT認証のトークンを取得するAPIとJWTのアクセストークンがなければAPIを叩けないと言う処理の実装、APIを叩くためのフロント画面の実装が上記で完了しているため、これらを組み合わせていく。 詳細 ①v-modelで入力されたusernameとpasswordをscriptのプロパティに格納 { username: '', password: '', } ②ログインボタンを押すと@click(v-on:click)でloginメソッドが実行され、プロパティのusernameとpasswordを利用して【簡単】django_restframeworkのjwt認証を最低限実装していくで実装したAPIを「http://127.0.0.1:8000/api-auth/jwt/」 のエンドポイントから叩く。 login: function(){ // token取得のためのusernameとpasswordセット const data = {username: this.username, password: this.password} // access_token&refresh_tokenを取得 this.axios .post("http://127.0.0.1:8000/api-auth/jwt/",data) // レスポンスを一旦tokensプロパティに格納 .then(response => (this.tokens = response.data)); } ③レスポンスのアクセストークンとリフレッシュトークンをそれぞれプロパティに格納 .then(response => (this.tokens = response.data)); tokens: { "refresh":'', "access":'' }, ④メンバー情報取得ボタンを押すと@click(v-on:click)でgetMemberメソッドが実行され、http://127.0.0.1:8000/api/v1/member/"に対してgetメソッドで情報を取得する ⑤今回はサーバサイドでAPIにJWT認証が必要となる設定をしているため、Headerに {Authorization: アクセストークン}を含める必要がある。そうしなければ認証されていませんとエラーが出る。 ⑥そこで先ほど取得したアクセストークンをheaderに {Authorization: アクセストークン}を含める。 this.axios .get("http://127.0.0.1:8000/api/v1/member/",{headers: { // postmanでのAPIcal同様にJWTが必要 // 検証モードで確認できるヘッダー "Authorization": 'JWT ' + this.tokens.access, } }) ⑦Membersプロパティにレスポンスを格納し、それぞれのメンバーの特徴をループ処理で表示する <div v-for="(member, key) in Members" :key="key"> <hr> <p>{{ member.username }}</p> <p>{{ member.gender }}</p> <p>{{ member.introduction }}</p> <p>{{ member.job }}</p> <hr> </div> 大枠 <template> <div> <!-- Membersプロパティから --> <div v-for="(member, key) in Members" :key="key"> <hr> <p>{{ member.username }}</p> <p>{{ member.gender }}</p> <p>{{ member.introduction }}</p> <p>{{ member.job }}</p> <hr> </div> <!-- scriptのuserプロパティに入力値が格納される --> <input type="text" placeholder="username" v-model="username"> <!-- scriptのpasswordプロパティに入力値が格納される --> <input type="text" placeholder="password" v-model="password"> <!-- クリックするとloginメソッドを実行 --> <button @click="login">login</button><hr> <!-- クリックするとgetInfoメソッドを実行 --> <button @click="getInfo">メンバー情報を取得</button> </div> </template> <script> export default { data() { return { Members: [], tokens: { "refresh":'', "access":'' }, username: '', password: '', }; }, methods: { // メンバーの各情報を取得 getInfo: function(){ this.axios .get("http://127.0.0.1:8000/api/v1/member/",{headers: { // postmanでのAPIcal同様にJWTが必要 // この通信がうまくいかない時はchromeの検証モード/networkから確認できる "Authorization": 'JWT ' + this.tokens.access, } }) // レスポンスをMembersプロパティに格納 .then(response => (this.Members = response.data)); }, // usernameとpasswordからjwt認証を行いaccess_tokenとrefresh_tokenを取得 login: function(){ // token取得のためのusernameとpasswordセット const data = {username: this.username, password: this.password} // access_token&refresh_tokenを取得 this.axios .post("http://127.0.0.1:8000/api-auth/jwt/",data) // レスポンスを一旦tokensプロパティに格納 .then(response => (this.tokens = response.data)); } } }; </script> Vueの実装はこれで最低限の機能は揃ったのではないだろうか

概要 Vueでセレクトボックスのライブラリを探すと、Vue-multiselectの記事がけっこう出てくるのですが、[Vue3]Vue-multiselect を用いた、ドロップダウンの実装とサンプルアプリの記事にある通り、Vue3への対応が怪しい感じがするとのこと。2022年1月時点ではVue3対応のリポジトリはあるものの、あまり更新されていませんでした。 ので今回は、上記の記事で紹介されていたvueform/multiselectというライブラリを使用して、Vue3でタグ選択を実装してみたので紹介したいと思います。 実装方法 こちらのドキュメントにコンポーネントに設定できるpropsが記載されています。 modeという項目が、入力の種別（single|multiple|tags）を設定する箇所になります。tag 選択を実装するには、tagsを指定すればOKです。念のため、該当箇所のキャプチャーを以下に添付します。 実装サンプル 実装サンプルは以下です。optionには、選択できるカテゴリーの一覧を設定する想定としています。 なお、vee-validateを今回併せて使用したのでサンプルにも含めていますが、特に使用する必要はないです。 <template> <Multiselect v-model="categoriesValue" :options="categoryOptions" mode="tags" placeholder="カテゴリー選択" /> </template> <script> import { defineComponent, getCurrentInstance } from "vue"; import { useField } from "vee-validate"; import Multiselect from "@vueform/multiselect"; export default defineComponent({ props: ["categories"], components: { Multiselect, }, setup() { const app = getCurrentInstance(); const props = app.props; // カテゴリーの選択一覧 const categoryOptions = props.categories.map((c) => { return { label: c.name, value: c.id, }; }); // カテゴリーの入力フィールド const { value: categories } = useField("categories"); const categoriesValue = computed({ get: () => categories.value, set: (value) => { categories.value = value; }, }); return { categoryOptions, categoriesValue, }; }, }); </script> <style src="@vueform/multiselect/themes/default.css"></style> 表示はこんな感じになります。