9
票
@importするときの@の意味
質問者さんのおっしゃる通り、そのファイルでは
@import '@/assets/styles/mixin.scss';
は
@import '../assets/styles/mixin.scss';
と同じ意味だと思われます。この@が何なのかは、webpackの設定ファイルを見れば答えが載っているかと思います。
...
4
票
Vue.jsの静的サイトでの利用について
はじめまして。Vue.jsを静的サイトの構築において使用するのが適しているかいないのか、という件について意見を伺いたいということですが、個人的な観点から行くと、質問者さんのケースでは十分にVue.jsを使用するメリットがあると言ってもよろしいかと思います。
一般に静的サイトで動きをもたせようと場合にはjQueryのなどのような単純なDOM操作のためのモジュールを使いがちですが、...
4
票
@importするときの@の意味
こんにちは。Faily Feelyさんの回答に対する補足回答です。回答にある通り、@ は、ルートディレクトリを示すことができるショートカットのようなものです。示してくれた例の他にも、ディレクトリの階層が深い場所にあるファイルから、ルートに近いファイルを import するときなどにも便利に使えます。
webpack の設定ファイルの名前から推測して、おそらくそのプロジェクトは、@vue/cli-...
4
票
将棋のBOD形式をhtmlに読み込ませる方法について
当該のスクリプトはドキュメントのロード時に存在するpre.shogizumenの置換を前提としているようであったのでそのまま動的なものに流用するのは厄介そうでしたが,幸いにもSSZumenがグローバルで利用可能な関数と一応なっていたのでそのままでも強引に使うことはできそうです.尤も強制的に再レンダリングを走らせるため厄介なことにはなりましたが……
const vueapp = new ...
4
票
承認済み
Vue.jsとBootstrapを両方使うのはありですか
Bootstrap は CSS フレームワークですが、アラート、ドロップダウンやモーダルダイアログなど一部のコンポーネントは JavaScript により制御されています。このため、 Vue.js を導入すると Bootstrap と Vue.js の機能が競合し、正常に動作しない可能性があります。
そこで、この問題を解決するために BootstrapVue を用いることが出来ます。...
3
票
承認済み
axiosのpostでstatus:500が返ってきたときにcatchに入らない
自己解決しました。
下記の部分でコンソールにログを表示していましたが、
これが、ブラウザ標準のエラーログと勘違いしていました。
.catch(error => {
console.info(error)
})
console.info(error)の結果
Error: Request failed with status code 500
at createError (...
3
票
承認済み
Vue.jsがうまくいきません
記述されているコードを実行してもエラーは出ませんでしたが、同じ変数名( var app )を何度も定義していることや、複数のVueインスタンス(new Vue({...})) が存在することが影響しているのではないかと思います。
また、Vue.js を使う場合は特別な理由がなければ生のJSを使う必要はないので、
例えば少し整理して書いてみると:
(上のコード見た限り、...
3
票
承認済み
Vuejsがうまくいきません。
問題点
new Vue( ... )にオブジェクトリテラルを渡していますが、同じプロパティ名(el,data,methods)を二度書くのは間違っています。エラーにはならないですが、後の値によって上書きされることになります。オブジェクトは1つのプロパティ名に対して1つの値しか持つことはできません。
たとえば
var o = { p: "11", p: "abc" };
と書けばoは{ p :...
3
票
isValid ? と"!isValid" の意味がわからない
isValid ? '' : '1px solid red'は、isValidがtrueならば''を、falseならば'1px solid red'を返します。
つまり、isValid == falseの場合に、赤枠が表示されます。
!isValidは、trueとfalseの反転ですから、isValid == falseの場合に、「名前を入力してください」が表示されます。
3
票
承認済み
ESLintのno-unused-expressionsの直し方
chaiとESLintのno-unused-expressionsルールは相性が悪く、chaiを使おうとするとどうしてもno-unused-expressionsに引っかかってしまいます、そこで、chaiを使う場合は後者を無効にする必要があります。そのためには、テストコードの先頭に次のコメントを書くとよいです。
/* eslint no-unused-expressions: "off" */
...
3
票
承認済み
Vue.jsのマスタッシュ構文の中身が反映されないです。どうすれば反映されるのでしょうか?
「Vue.js を記述したファイル」を読み込んでいないため、マスタッシュ構文によるテキストの展開が行われていないのではないでしょうか。以下は当該ファイルの内容をインラインスクリプトとして記述した動作例ですが、正常に動作しています。
テンプレート構文[1]
Vue.js では HTML ベースのテンプレート構文を使っているので、Vue インスタンスのデータと描画された DOM ...
3
票
Vue.jsでTo Doリストを作っているのですが、VSCodeのLive Serverを起動させても急に反映されなくなりました。
以下の HTML を読むと、以下の 3 つの要素が生成されることがわかります:
todos という配列の要素数だけの li 要素
input 要素
todo オブジェクトの item プロパティの値をコンテンツとして持つ span 要素
<li v-for="todo in todos"></li>
<input type="checkbox">
<...
3
票
承認済み
vueのforEachの中でメソッドが呼べない
結論から言うと、vue.jsは関係なくjavascriptの話です。
ご理解されている通り、forEach内のthisは配列自身のことを指しています。
一方method2はvueインスタンスに属するメソッドですので、この配列を指すthisからは呼び出せません。
次のいずれかの方法で解決できます。
1.
ary.forEach((val, index) => {
console.log(...
3
票
承認済み
カスタムコンポーネントにv-modelを使用した際に、親でwatchしている変数が更新されない
原因
v-model が通常動作しているのは、 update:modelValue によって、親側で v-model で貼り付けた data の interval フィールドが更新され、そして更新されたことを検知した Vue Reactivity のシステムが、それに依存しているコンポーネント(今回で言えば NumberInput)を再 render & update することによって、...
2
票
vuexでの複数storeのwatch
logを取りたいだけならpluginを使えばできそうです。
https://codepen.io/isuke/pen/jxgdVQ
こちらに書いてみました。
もう少し詳しくやりたいことを書いてもらえると、よりよい方法を教えることができるかもしれません。
const logger = store => {
store.subscribe((mutation, state) =...
2
票
computed 中の関数が呼び出されるのはいつ?
①computedではなくisValid関数が呼び出されるのはいつか?という意味だと思います。
呼び出されるのはざっくりいうとVueオブジェクトの初期化が完了した時とnameの値が変更された時です。
②thisが必要なのはVue.jsがthis === vmとなるようにupdateNameを呼び出すからです。
event.target.valueはinput要素に入力された値です。
Vue....
2
票
Vue や React では JSX のような JavaScript の構文拡張の使用が必須ですか?
JSX
JSX は JavaScript や TypeScript の構文を拡張する物です。
基本的には、トランスコンパイラなどと呼ばれるツールで、(仮想)DOMを構築する関数の呼び出しに変換されます。
JSX を使用せず、直接これらの関数を呼び出すコードを書いてもかまいません。
https://facebook.github.io/react/docs/react-without-jsx....
2
票
Storybook for Vueで「Failed to mount component: template or render function not defined.」になる
こちら自己解決しました。
原因は vue-loader で、バージョン15から指定の仕方が変わったために、 @storybook/vue が動かなかったようです。
https://github.com/storybooks/storybook/issues/3492
上記のissueを発見し、 @storybook/[email protected] をインストールしたところ無事動きました。
2
票
Vue.jsの再コンパイルがしたい
単にRailsアプリのフロントアセットのコンパイルと言ってもどのような構成になっているか(ビルド環境、使用技術)によって様々な場合が存在するかと思います。
Rails標準のアセットパイプラインの sprockets-rails や webpacker などを利用しているアプリケーションであれば一般的に
rails assets:precompile
でプリコンパイルが行えるでしょう。
2
票
承認済み
Vue.js のソースコードに残すコメントの推奨フォーマットは?
Vue.jsはjavascriptの単なるライブラリであり、ソースは紛れもなくjavascriptなのだから、「javascriptを用いた場合の最適と思っているフォーマット」で良いでしょう。Vue.jsかどうかを特別視する必要はないです。
質問者が、それをJSDocだと思っているならば、JSDocで良いでしょう。
2
票
vueコマンドが認識されない
node.jsのインストーラーを使った場合、デフォルトではインストール時にスクリプトのフォルダがPATHに追加されます。
何かの理由でPATHにない場合は、npm install -gでのインストール先をnpm bin -gで確認し、PATHに追加で解決するはずです。
> npm bin -g
C:\Users\foobar\AppData\Roaming\npm
2
票
承認済み
単独ファイルコンポネント(.vueファイル)にも、vue-class-componentのクラスにもpugプレプロセッサーを利用出来るようなWebpack設定
私の場合は、これで動いてくれました:
{
test: /\.pug$/,
oneOf: [{
resourceQuery: /^\?vue/,
use: ["pug-plain-loader"]
}, {
use: [
"html-loader",
"pug-html-...
2
票
承認済み
Vue.jsでaxiosを使い.envファイルにアクセストークンを置いてもブラウザのdevtoolからトークンがばれる
Vue.jsをブラウザ上で動作させる場合、axiosでHTTPリクエストを行うのもブラウザです。そのため、必然的にブラウザがアクセストークンを知ることになるため、質問者さんのおっしゃる通り、どうしようもないです。
アクセストークンをブラウザ(クライアント側)に知られてはいけない場合、トークンを知っているAPIサーバーを用意し、クライアント(Vue.js)...
2
票
<router-link>を条件によって違うページに遷移させたい
Vue Router を使い、遷移をするか、遷移を抑制するのかを指定するためには、ナビゲーションガードという機能を用いることが出来ます。
ナビゲーションガード
この名前が示すように、 vue-router によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、...
2
票
承認済み
Vue.jsの子コンポーネントのpropsのテスト
@vue/test-utilsのmount (もしくはshallowMount) メソッドを用いてコンポーネントをマウントした場合、wrapper.find(Child).props("prop")のようにして子コンポーネントに渡されたpropsを取得することができます。
テスト全体は以下のようになるでしょう。
import { mount } from "@vue/test-utils";
...
2
票
承認済み
クリックすると全部のボタンの数が増えてしまうのではなく、各ボタンごとにカウントできるようにしたい。
App.vue を以下のようにすると良いと思います。ポイントは、todosにpushするときにcountをちゃんと渡し、ボタン上の表示を todo.count にすることと、あと incrementとdescrementのときにtodoの参照を渡すことですね。
<template>
<v-app>
<div>
<v-app-bar ...
2
票
承認済み
VueJSを単一ファイルコンポーネントで内包(?)したい
手元では表示されるエラーが異るのですが、どうやら最新のrollup-plugin-vue(v5.1.2)ではvue-runtime-helperまわり構成が変更されたためか、そのあたりのモジュール解決で問題が発生しているようです。(issue #303, issue #308)
これらは、rollup-plugin-vueのバージョンを5.1.1に落すことで一時的な対処が可能です。
yarn ...
2
票
承認済み
文字列を返すメソッドで値がない場合、 null / undefined / 空文字列のいずれを返すべきか
私の場合は空文字で返すことが多いです。
もし代入されていないことを表現したい場合はnullを使います。undefinedは自分から利用はしません。
Javascriptの場合はstringであってもオブジェクトですので、プロパティもありますしいくつかのメソッドも存在します。
つまりstring型で返さないと、それらのプロパティやメソッドはnullやundefinedが渡ってきた場合、...
2
票
Vue.jsと比べてNuxt.jsがどう違うのかがわかりません
NuxtJS は Vue.js プロジェクトのバックボーンであり、柔軟でありながら自信を持ってプロジェクトを構築するための構造を提供します。
主な機能
コードを自動的に分割すること
サーバーサイドレンダリング
非同期データをハンドリングするパワフルなルーティング
静的ファイルの配信
ES2015+ のトランスパイレーション
JS と CSS のバンドル及びミニファイ化
...
Only top scored, non community-wiki answers of a minimum length are eligible
関連するタグ
vue.js × 213javascript × 100
nuxt.js × 37
typescript × 19
axios × 17
html × 16
node.js × 10
laravel × 9
firebase × 9
npm × 8
webpack × 7
ruby-on-rails × 6
css × 6
twitter-bootstrap × 6
vuex × 6
php × 5
docker × 4
cors × 4
eslint × 4
aws × 3
非同期 × 3
webapi × 3
yarn × 3
rollupjs × 3
python × 2