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

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

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

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

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

Nuxt.js

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

JavaScript

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

Q&A

解決済

1回答

841閲覧

nuxt.jsのplugin内で、@nuxtjs/axiosが使えない

退会済みユーザー

退会済みユーザー

総合スコア0

Vue.js

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

ESLint

ESLintは、JavaScriptのための構文チェックツール。全検証ルールを自由に on/offでき、独自のプロジェクトに合わせたカスタムルールを容易に設定することが可能。公開されている様々なプラグインを組み込んで使用することもできます。

Nuxt.js

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

JavaScript

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

0グッド

0クリップ

投稿2019/11/08 16:42

nuxt.jsでVeeValidateを使いたくて以下を参考にセットアップしました。
Nuxt.jsでバリデーションするためにVeeValidateを使う

DBの値と比較するカスタムルールを作りたくて以下を自作しました。
実際にAPI側は実装していてpostmanで確認しています。

肝心のaxiosで接続するところで、getがないと言われています。

// plugins/vee-validate.js import Vue from 'vue' import { extend, localize, ValidationObserver, ValidationProvider } from 'vee-validate' // 使用する機能 import ja from 'vee-validate/dist/locale/ja.json' // エラーメッセージの日本語化用 import * as rules from 'vee-validate/dist/rules' // 全てのバリデーションルール // forループで全てのバリデーションルールをextendで登録する for (const key in rules) { // eslint-disable-next-line import/namespace extend(key, rules[key]) } // カスタムバリデーションルール追加。todo:: 別ファイルへ切り分けて上記のように繰り返しでextendしたい。 const exists = { params: ['table', 'column'], message: '指定された{_field_}は存在しません。', validate (value, { table, column }) { // todo::paramsの精査。500を返したい。 if (!table || !column) { alert('ルール記述に漏れがあります。') } const params = { value, table, column } console.log(this) // this.axios.get('/rules/exists', params) // .then((response) => { // console.log(response) // // return response.data // }) } } extend('exists', exists) Vue.component('ValidationProvider', ValidationProvider) Vue.component('ValidationObserver', ValidationObserver) localize('ja', ja)
// 使う側。 <ValidationProvider name="email" rules="required|max:50|email|exists:User, email"> <v-text-field v-model="email" slot-scope="{errors, valid}" counter="50" :error-messages="errors" :success="valid" placeholder="info@example.com" required ></v-text-field> </ValidationProvider>

nuxt.jsで、'@nuxtjs/axios'を使っているのですが、
console.log(this)console.log(this.context)console.log(axios)
また

validate (value, { $axios, table, column }) { console.log($axios) }

などでどうにかaxiosを取得したいのですが、全部ダメで途方にくれています。

validate内でthisを使っているので、appのコンテキストではないんですよね。。。

computesRequired: false lazy: false message: ƒ (field, values) params: (2) [{…}, {…}] validate: ƒ validate(value, _ref)

上記はplugin内ですが、適当なpageコンポーネントで以下を実行して確認するとnuxt.config.jsで設定しているエンドポイントが確認できます。

mounted () { console.log(this.$axios.defaults.baseURL) }

import axios from 'axios'を使えばaxiosは使えますが、console.log(axios.defaults.baseURL)で確認するとundefinedが返ってくるので、@nuxtjs/axiosの方を使いたいのです。

nuxt.config.jsも一応載せておきます。

const colors = require('vuetify/es5/util/colors').default const environment = process.env.NODE_ENV || 'development' const envEnvironment = require(`./env.${environment}.js`) const envCommon = require(`./env.js`) const envSet = Object.assign(envCommon, envEnvironment) module.exports = { mode: 'universal', env: envSet, /* ** Headers of the page */ head: { // titleTemplate: '%s - ' + process.env.npm_package_name, titleTemplate: '%s - ' + envSet.site_name, title: process.env.npm_package_name || '', meta: [ { charset: 'utf-8' }, { name: 'viewport', content: 'width=device-width, initial-scale=1' }, { hid: 'description', name: 'description', content: process.env.npm_package_description || '' } ], link: [ { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' } ] }, /* ** Customize the progress-bar color */ loading: { color: '#fff' }, /* ** Global CSS */ css: [ ], /* ** Plugins to load before mounting the App */ plugins: [ '@/plugins/axios', '@/plugins/day', '@/plugins/parts', '@/plugins/vee-validate' ], /* ** Nuxt.js dev-modules */ buildModules: [ '@nuxtjs/eslint-module', '@nuxtjs/vuetify' ], /* ** Nuxt.js modules */ modules: [ 'nuxt-fontawesome', '@nuxtjs/axios' ], /* ** vuetify module configuration ** https://github.com/nuxt-community/vuetify-module */ vuetify: { customVariables: ['~/assets/variables.scss'], theme: { light: true, themes: { light: { primary: colors.cyan.base, secondary: colors.lime.base, accent: colors.pink.base, info: colors.teal.lighten1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3 }, dark: { primary: colors.blue.darken2, secondary: colors.amber.darken3, accent: colors.grey.darken3, info: colors.teal.lighten1, warning: colors.amber.base, error: colors.deepOrange.accent4, success: colors.green.accent3 } } } }, fontawesome: { imports: [ { set: '@fortawesome/free-solid-svg-icons', icons: ['fas'] } ] }, axios: { browserBaseURL: envSet.apiBaseUrl.client, baseURL: envSet.apiBaseUrl.express }, /* ** Build configuration */ build: { transpile: [ 'vee-validate/dist/rules' ], /* ** You can extend webpack config here */ extend (config, ctx) { } } }

最初の諸々設定はもうやりたくない。。。

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

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

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

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

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

guest

回答1

0

ベストアンサー

試していませんが、 plugins/vee-validate.js に以下のように追記したら動いたりしませんか。

js

1export default ({ $axios }, inject) => { 2 // カスタムバリデーションルール追加。todo:: 別ファイルへ切り分けて上記のように繰り返しでextendしたい。 3 const exists = { 4 params: ['table', 'column'], 5 message: '指定された{_field_}は存在しません。', 6 async validate (value, { table, column }) { 7 // todo::paramsの精査。500を返したい。 8 const params = { 9 value, 10 table, 11 column 12 } 13 const response = await $axios.get('/rules/exists', params) 14 return response.data 15 } 16 } 17 extend('exists', exists) 18}

※追記

forループで登録したいようなので、このようにしたら動くかもしれません。

js

1// plugins/vee-validate.js 2import Vue from 'vue' 3import { extend, localize, ValidationObserver, ValidationProvider } from 'vee-validate' // 使用する機能 4import ja from 'vee-validate/dist/locale/ja.json' // エラーメッセージの日本語化用 5import * as rules from 'vee-validate/dist/rules' // 全てのバリデーションルール 6import * as myRules from '@/rules' // 全てのカスタムバリデーションルール 7 8// forループで全てのバリデーションルールをextendで登録する 9for (const key in rules) { 10 // eslint-disable-next-line import/namespace 11 extend(key, rules[key]) 12} 13 14Vue.component('ValidationProvider', ValidationProvider) 15Vue.component('ValidationObserver', ValidationObserver) 16localize('ja', ja) 17 18export default ctx => { 19 for (const key in myRules) { 20 // eslint-disable-next-line import/namespace 21 extend(key, myRules[key](ctx)) 22 } 23}

js

1// rules.js 2const exists = ({ $axios }) => ({ 3 params: ['table', 'column'], 4 message: '指定された{_field_}は存在しません。', 5 async validate (value, { table, column }) { 6 // todo::paramsの精査。500を返したい。 7 const params = { 8 value, 9 table, 10 column 11 } 12 const response = await $axios.get('/rules/exists', params) 13 return response.data 14 } 15}) 16 17export { exists } 18// 増えていく場合はこう 19// export { exists, hoge, fuga }

投稿2019/11/09 06:45

編集2019/11/17 03:11
aaharu

総合スコア441

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

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

退会済みユーザー

退会済みユーザー

2019/11/15 14:24

返事が遅くなりすみません。 上記で$axiosにアクセスできるようにはなったのですが、カスタムルールが複数ありましてもう一方がuniqueなのですが、同じようにplugins/vee-validate.jsにexportから記述して中身だけuniqueにすれば良いと思ったのですが、1ファイルにexportは1つしかかけないようで困っています。。。 まず、別ファイルに切り分けたいと思ってrules/exists.jsなるものを作って そこで、extend('exists', exists)をのぞいて記述したものを plugins/vee-validate.jsでimportして、extend('exists', exists)してみたのですが動かないようです。。。
aaharu

2019/11/15 14:34

ファイルを分けなくても、export defaultの上の部分に他のextendを書くなり、extend('exists', exists)の下に他のextendを書いても動くと思います。
退会済みユーザー

退会済みユーザー

2019/11/16 13:10

以下のように繰り返しで登録させたいのですが、ファイルを分けた時に、({ $axios }, inject)が邪魔をしているようで、登録がされないんです。。。 for (const key in rules) { // eslint-disable-next-line import/namespace extend(key, rules[key]) } exportしたいのは、const existsの中身なのですが、何かご存知ないでしょうか。。。
aaharu

2019/11/17 03:13

回答に追記しました。
退会済みユーザー

退会済みユーザー

2019/11/17 09:39

ありがとうございます! まだ試していないのですが時間があるときに試してみます!
退会済みユーザー

退会済みユーザー

2019/11/19 13:03

こんばんは! vee-validateの繰り返し登録と比較して、 (ctx) というものがあると思うのですが、これは何なのでしょうか? コンテキストかな〜とは思うのですが、なぜextend(key, myRules[key](ctx)) のように最後につけているのかがわからないのです。
aaharu

2019/11/22 03:30 編集

ctx はお察しの通りコンテキストです。 axios-module はコンテキストに axios インスタンスを挿入しているので、プラグインで参照したいのであれば、コンテキストから取得するのがよいと思います。 https://github.com/nuxt-community/axios-module/blob/v5.8.0/lib/plugin.js#L200 extend(key, myRules[key](ctx)) は axios を使いたいので、 rule に対して引数でコンテキストを渡しています。( myRules[key] はコンテキストを引数にとる関数です。) 受け取る側は ({ $axios }) として、オブジェクトの分割代入で、コンテキストのうち $axios だけを受け取っています。 https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring 分割代入使って書きましたが、別にここは $axios だけ引数で渡してもいいです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問