7
質問者さんのおっしゃる通り、そのファイルでは
@import '@/assets/styles/mixin.scss';
は
@import '../assets/styles/mixin.scss';
と同じ意味だと思われます。この@が何なのかは、webpackの設定ファイルを見れば答えが載っているかと思います。
これはwebpackでパスに対するエイリアスを指定しているものと思われます。つまり、@と書いてあったらプロジェクトのルートディレクトリを指すように設定しているのです。恐らく、そのファイルの場合は@が指し示す位置が..と同じなので、質問者さんの考察のようになるのではないかと思います。
このように設定することの利点は、...
4
こんにちは。Faily Feelyさんの回答に対する補足回答です。回答にある通り、@ は、ルートディレクトリを示すことができるショートカットのようなものです。示してくれた例の他にも、ディレクトリの階層が深い場所にあるファイルから、ルートに近いファイルを import するときなどにも便利に使えます。
webpack の設定ファイルの名前から推測して、おそらくそのプロジェクトは、@vue/cli-init を使用してセットアップしたものだと思います。これは、Vue.js プロジェクトが提供してくれているツールで、Vue.js に適した基本設定が施されたプロジェクトのひな形を自動生成してくれる便利なツールです。以下のコマンドでこのツールをインストールし、ひな形生成コマンドを実行すると、webpack と Vue....
3
記述されているコードを実行してもエラーは出ませんでしたが、同じ変数名( var app )を何度も定義していることや、複数のVueインスタンス(new Vue({...})) が存在することが影響しているのではないかと思います。
また、Vue.js を使う場合は特別な理由がなければ生のJSを使う必要はないので、
例えば少し整理して書いてみると:
(上のコード見た限り、ボタンをクリックすると文章が表示されるような感じでしょうか)
var app = new Vue({
el: '#app',
data: {
headding: '当社のダミー商品2つめを紹介します。',
description1: '1. 当社のダミー商品2つめを紹介します。...',
...
3
問題点
new Vue( ... )にオブジェクトリテラルを渡していますが、同じプロパティ名(el,data,methods)を二度書くのは間違っています。エラーにはならないですが、後の値によって上書きされることになります。オブジェクトは1つのプロパティ名に対して1つの値しか持つことはできません。
たとえば
var o = { p: "11", p: "abc" };
と書けばoは{ p : "abc" }となります。
解決策
vueインスタンスを2個作ります。
var app1 = new Vue({
el: '#vueHook1',
data: {
headding: '当社のダミー商品1つめを紹介します。',
description1: '1. ...
3
isValid ? '' : '1px solid red'は、isValidがtrueならば''を、falseならば'1px solid red'を返します。
つまり、isValid == falseの場合に、赤枠が表示されます。
!isValidは、trueとfalseの反転ですから、isValid == falseの場合に、「名前を入力してください」が表示されます。
3
はじめまして。Vue.jsを静的サイトの構築において使用するのが適しているかいないのか、という件について意見を伺いたいということですが、個人的な観点から行くと、質問者さんのケースでは十分にVue.jsを使用するメリットがあると言ってもよろしいかと思います。
一般に静的サイトで動きをもたせようと場合にはjQueryのなどのような単純なDOM操作のためのモジュールを使いがちですが、規模が大きくなってくると結局は操作が複雑になり、jQueryの限界を超えて頑張らざるをえないという苦難に立ち向かう羽目になります。今後、ご自身のサイトがどの程度スケールする可能性があるか(この場合ではサイトが持つページの数や、ひとつの画面の中でどの程度JavaScriptを使った操作を行う可能性があるのかという点)を考慮した上で、...
3
こんな感じでどうでしょうか?
HTML:
<div id="myapp">
<div v-repeat="input in inputs" class="form-group">
<label>{{input.label}}</label>
<input type="text" v-model="form[input.model_value]" class="form-control" name="{{input.label}}"></input>
</div>
</div>
JS:
var vm = new Vue({
el: '#myapp',
data: {
...
3
.on(events, handler)を使う場合、jQueryオブジェクトに現在格納されているDOM要素、つまり現在存在するDOM要素だけにイベントが設定されます。つまり、Vue.jsによりリストが生成された後でjQueryのイベント設定コードを実行する必要があります。
さらに言えば、Vue.jsを使用する場合、#map-listの子要素は動的に変化すると考えられますので、たとえば.on(events, selector, handler)を用いて親要素にイベントを設定しておくことで、動的に追加された要素などに対してもイベントを発火させることが可能です。
注意としては親要素(サンプル中container)はVue.jsにより置換されますので、やはりVue.jsのあとにコードを配置する必要があります。...
3
自己解決しました。
下記の部分でコンソールにログを表示していましたが、
これが、ブラウザ標準のエラーログと勘違いしていました。
.catch(error => {
console.info(error)
})
console.info(error)の結果
Error: Request failed with status code 500
at createError (createError.js?16d0:16)
at settle (settle.js?db52:18)
at XMLHttpRequest.handleLoad (xhr.js?ec6c:77)
下記のようにconstで受け取り、statusを判定することで、
status毎の処理分岐ができそうです。
async ...
3
chaiとESLintのno-unused-expressionsルールは相性が悪く、chaiを使おうとするとどうしてもno-unused-expressionsに引っかかってしまいます、そこで、chaiを使う場合は後者を無効にする必要があります。そのためには、テストコードの先頭に次のコメントを書くとよいです。
/* eslint no-unused-expressions: "off" */
これは、そのファイル内でESLintによるno-unused-expressionsのチェックを無効にするという指示です。この記法については、ドキュメントのここに説明があります。
ファイル全体で無効になるのがまずい場合は、eslint-disable-next-...
3
「Vue.js を記述したファイル」を読み込んでいないため、マスタッシュ構文によるテキストの展開が行われていないのではないでしょうか。以下は当該ファイルの内容をインラインスクリプトとして記述した動作例ですが、正常に動作しています。
テンプレート構文[1]
Vue.js では HTML ベースのテンプレート構文を使っているので、Vue インスタンスのデータと描画された DOM を宣言的に対応させることができます。全ての Vue.js テンプレートは、仕様に準拠しているブラウザや HTML パーサによってパースできる有効な HTML です。
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
...
3
以下の HTML を読むと、以下の 3 つの要素が生成されることがわかります:
todos という配列の要素数だけの li 要素
input 要素
todo オブジェクトの item プロパティの値をコンテンツとして持つ span 要素
<li v-for="todo in todos"></li>
<input type="checkbox">
<span>{{ todo.item }}</span>
これを踏まえて JavaScript のコードを読むと、そこには item プロパティを持つ todo オブジェクトが存在しないことがわかります。そこで、以下のように修正することで、このエラーを解決することが出来ます。
var app =...
3
当該のスクリプトはドキュメントのロード時に存在するpre.shogizumenの置換を前提としているようであったのでそのまま動的なものに流用するのは厄介そうでしたが,幸いにもSSZumenがグローバルで利用可能な関数と一応なっていたのでそのままでも強引に使うことはできそうです.尤も強制的に再レンダリングを走らせるため厄介なことにはなりましたが……
const vueapp = new Vue({
el: '#app',
data: {
bod: '',
aaa: '',
show: true,
},
watch: {
bod() {
this.show=false
this.$nextTick(...
3
Bootstrap は CSS フレームワークですが、アラート、ドロップダウンやモーダルダイアログなど一部のコンポーネントは JavaScript により制御されています。このため、 Vue.js を導入すると Bootstrap と Vue.js の機能が競合し、正常に動作しない可能性があります。
そこで、この問題を解決するために BootstrapVue を用いることが出来ます。BootstrapVue は Bootstrap の機能を Vue.js のコンポーネントとして統合しているため、前述の問題が解消されています。ただし、現時点では Bootstrap および Vue.js の最新バージョンに未対応という点に注意する必要があります。一方で、 Bootstrap の動的な機能を使用しておらず、純粋に ...
3
結論から言うと、vue.jsは関係なくjavascriptの話です。
ご理解されている通り、forEach内のthisは配列自身のことを指しています。
一方method2はvueインスタンスに属するメソッドですので、この配列を指すthisからは呼び出せません。
次のいずれかの方法で解決できます。
1.
ary.forEach((val, index) => {
console.log(val);
this.method2();
});
ary.forEach(function(val, index) {
console.log(val);
this.method2();
}, this);
1はアロー関数式というもので関数内のthisを語彙的に束縛します。
...
2
event.currentTarget を使って下さい。
簡単に言うと、
イベントが発生した要素(event.target)と、
イベントをキャッチした要素(event.currentTarget)の
2種類ある、ということです。
イベントバブリングについてお調べになると、理解が深まると思います。
DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 - Qiita
なお、やりたいことが、行全体の色を変えるだけでしたら、私なら css を書くと思います。
tr:hover td {
background-color: red
}
// register the grid component
Vue.component('demo-grid', {
...
2
JSX
JSX は JavaScript や TypeScript の構文を拡張する物です。
基本的には、トランスコンパイラなどと呼ばれるツールで、(仮想)DOMを構築する関数の呼び出しに変換されます。
JSX を使用せず、直接これらの関数を呼び出すコードを書いてもかまいません。
https://facebook.github.io/react/docs/react-without-jsx.html
// JSX
class Hello extends React.Component {
render() {
return <div>Hello {this.props.toWhat}</div>;
}
}
// JSX 不使用
class Hello extends ...
2
logを取りたいだけならpluginを使えばできそうです。
https://codepen.io/isuke/pen/jxgdVQ
こちらに書いてみました。
もう少し詳しくやりたいことを書いてもらえると、よりよい方法を教えることができるかもしれません。
const logger = store => {
store.subscribe((mutation, state) => {
console.log('watched: ' + state.test1.n)
})
}
const store = new Vuex.Store({
modules: {
test1: {
state: {
n: 1
...
2
こちら自己解決しました。
原因は vue-loader で、バージョン15から指定の仕方が変わったために、 @storybook/vue が動かなかったようです。
https://github.com/storybooks/storybook/issues/3492
上記のissueを発見し、 @storybook/vue@4.0.0-alpha.16 をインストールしたところ無事動きました。
2
①computedではなくisValid関数が呼び出されるのはいつか?という意味だと思います。
呼び出されるのはざっくりいうとVueオブジェクトの初期化が完了した時とnameの値が変更された時です。
②thisが必要なのはVue.jsがthis === vmとなるようにupdateNameを呼び出すからです。
event.target.valueはinput要素に入力された値です。
Vue.jsの勉強をするなら古い情報でなく公式ドキュメントを読んだ方が効率も正確性もよいと思います。
例えば①に関しては 算出プロパティとウォッチャ — Vue.js にほとんど答えが書いてあります。
2
単にRailsアプリのフロントアセットのコンパイルと言ってもどのような構成になっているか(ビルド環境、使用技術)によって様々な場合が存在するかと思います。
Rails標準のアセットパイプラインの sprockets-rails や webpacker などを利用しているアプリケーションであれば一般的に
rails assets:precompile
でプリコンパイルが行えるでしょう。
2
node.jsのインストーラーを使った場合、デフォルトではインストール時にスクリプトのフォルダがPATHに追加されます。
何かの理由でPATHにない場合は、npm install -gでのインストール先をnpm bin -gで確認し、PATHに追加で解決するはずです。
> npm bin -g
C:\Users\foobar\AppData\Roaming\npm
2
私の場合は、これで動いてくれました:
{
test: /\.pug$/,
oneOf: [{
resourceQuery: /^\?vue/,
use: ["pug-plain-loader"]
}, {
use: [
"html-loader",
"pug-html-loader"
]
}]
}
2
Vue.jsをブラウザ上で動作させる場合、axiosでHTTPリクエストを行うのもブラウザです。そのため、必然的にブラウザがアクセストークンを知ることになるため、質問者さんのおっしゃる通り、どうしようもないです。
アクセストークンをブラウザ(クライアント側)に知られてはいけない場合、トークンを知っているAPIサーバーを用意し、クライアント(Vue.js)からはそのAPIサーバーに対してリクエストを発行、アクセストークンを用いた実際のリクエストはAPIサーバーが行うという方法をとることになります。
2
Vue Router を使い、遷移をするか、遷移を抑制するのかを指定するためには、ナビゲーションガードという機能を用いることが出来ます。
ナビゲーションガード
この名前が示すように、 vue-router によって提供されるナビゲーションガードは、リダイレクトもしくはキャンセルによって遷移をガードするために主に使用されます。ルートナビゲーション処理 (グローバル、ルート単位、コンポーネント内) をフックする多くの方法があります。
パラメータまたはクエリの変更は enter/leave ナビゲーションガードをトリガーしない ということを覚えておいてください。それらの変更に対応するために $route オブジェクトを監視する、またはコンポーネント内ガード beforeRouteUpdate ...
2
@vue/test-utilsのmount (もしくはshallowMount) メソッドを用いてコンポーネントをマウントした場合、wrapper.find(Child).props("prop")のようにして子コンポーネントに渡されたpropsを取得することができます。
テスト全体は以下のようになるでしょう。
import { mount } from "@vue/test-utils";
import App from "./App.vue";
import Child from "./components/Child.vue";
const wrapper = mount(App);
expect(wrapper.find(Child).props("fuga")).toEqual("hoge");...
2
手元では表示されるエラーが異るのですが、どうやら最新のrollup-plugin-vue(v5.1.2)ではvue-runtime-helperまわり構成が変更されたためか、そのあたりのモジュール解決で問題が発生しているようです。(issue #303, issue #308)
これらは、rollup-plugin-vueのバージョンを5.1.1に落すことで一時的な対処が可能です。
yarn add rollup-plugin-vue@5.1.1
ところで、compileTemplate は現在のrollup-plugin-vueでは廃止されているオプションです。情報はすぐに古くなりやすいので公式のドキュメントも積極的に参考にしてください。
2
私の場合は空文字で返すことが多いです。
もし代入されていないことを表現したい場合はnullを使います。undefinedは自分から利用はしません。
Javascriptの場合はstringであってもオブジェクトですので、プロパティもありますしいくつかのメソッドも存在します。
つまりstring型で返さないと、それらのプロパティやメソッドはnullやundefinedが渡ってきた場合、存在しないプロパティを参照したりメソッド実行時エラーが起きる可能性があります。
参考
もちろん毎回型チェックを入れるという処理になっているもしくは、空文字と代入されていないことを区別したいという場合は利用したりしますが、特にそのような制約がない場合は空文字を使います。
さらに、...
2
NuxtJS は Vue.js プロジェクトのバックボーンであり、柔軟でありながら自信を持ってプロジェクトを構築するための構造を提供します。
主な機能
コードを自動的に分割すること
サーバーサイドレンダリング
非同期データをハンドリングするパワフルなルーティング
静的ファイルの配信
ES2015+ のトランスパイレーション
JS と CSS のバンドル及びミニファイ化
開発モードにおけるホットリローディング
プリプロセッサ: Sass, Less, Stylus など
HTTP/2 push headers ready
モジュール構造で拡張できること
2
TypeScript の構文は JavaScript の構文を拡張する形で作られています。つまり JavaScript で使える構文は TypeScript でも使えます(あくまで構文の話であって、コンパイルすると型エラーが出ることはあるかもしれませんが)。
つまり、class を extends する構文は JavaScript で使えますが、TypeScript でも使えます。どちらでも使える構文です。
上位に投票された、最小文字数のコミュニティ wiki 以外の回答のみが対象となります