タグ付けされた質問 「vue.js」

私のアプリはユーザー認証にFirebaseAPIを使用しており、ログインステータスをブール値としてVuex状態で保存しています。 ユーザーがログインすると、ログインステータスを設定し、それに応じて[ログイン/ログアウト]ボタンを条件付きで表示します。 ただし、ページが更新されると、vueアプリの状態は失われ、デフォルトにリセットされます これにより、ユーザーがログインしてページが更新された場合でも、ログインステータスがfalseに戻され、ユーザーがログインしたままでもログアウトボタンの代わりにログインボタンが表示されるため、問題が発生します。 この動作を防ぐにはどうすればよいですか クッキーを使用します か、それとも他のより良い解決策が利用可能です... -

113 javascript  vue.js  vuejs2  state  vuex 

概観 Vue.js 2.xでは、model.syncされる非推奨。 では、Vue.js 2.xの兄弟コンポーネント間で通信する適切な方法は何ですか？ バックグラウンド 私がVue 2.xを理解しているように、兄弟通信の好ましい方法は、ストアまたはイベントバスを使用することです。 エヴァン（ヴューの創設者）によると： また、データフローが最終的に追跡できなくなり、デバッグが非常に困難になるため、「コンポーネント間でのデータの受け渡し」は一般に悪い考えです。 データの一部を複数のコンポーネントで共有する必要がある場合は、 グローバルストアまたはVuexを使用してください。 [ ディスカッションへのリンク ] そして： .onceおよび.sync非推奨です。小道具は常に一方通行です。親スコープで副作用を生成するには、コンポーネントはemit暗黙的なバインディングに依存するのではなく、イベントを明示的に指定する必要があります。 したがって、Evan は$emit()およびの使用を推奨してい$on()ます。 懸念 私が心配しているのは： それぞれがグローバルな可視性storeをevent持っています（私が間違っている場合は修正してください）。 マイナーなコミュニケーションごとに新しいストアを作成するのはもったいないです。 私が欲しいのは、兄弟コンポーネントのスコープ eventsまたはstores可視性です。（あるいは、おそらく私は上記の考えを理解していませんでした。） 質問 では、兄弟コンポーネント間で通信するための正しい方法は何ですか？

112 javascript  vue.js  vuejs2  vue-component  vuex 

people次のようなオブジェクトを含むと呼ばれる配列があります。 前 [ {id: 0, name: 'Bob', age: 27}, {id: 1, name: 'Frank', age: 32}, {id: 2, name: 'Joe', age: 38} ] それは変わることができます： 後 [ {id: 0, name: 'Bob', age: 27}, {id: 1, name: 'Frank', age: 33}, {id: 2, name: 'Joe', age: 38} ] フランクが33歳になったことに注目してください。 people配列を監視しようとするアプリがあり、値のいずれかが変更されると、変更をログに記録します。 <style> input { display: …

108 javascript  vue.js  vuejs2 

いくつかのフォーム検証を備えたコンポーネントがあります。これは、複数ステップのチェックアウトフォームです。以下のコードは最初のステップです。ユーザーがテキストを入力したことを検証し、名前をグローバル状態で保存してから、次のステップに送信します。私はvee-validateとvuex を使用しています <template> <div> <div class='field'> <label class='label' for='name'>Name</label> <div class="control has-icons-right"> <input name="name" v-model="name" v-validate="'required|alpha'" :class="{'input': true, 'is-danger': errors.has('name') }" type="text" placeholder="First and Last"> <span class="icon is-small is-right" v-if="errors.has('name')"> <i class="fa fa-warning"></i> </span> </div> <p class="help is-danger" v-show="errors.has('name')">{{ errors.first('name') }}</p> </div> <div class="field pull-right"> <button class="button is-medium is-primary" type="submit" …

108 vue.js  vuejs2  vue-component  vuex 

まず、Vueは初めてだと言いたいのですが、これはVueを使用した初めてのプロジェクトです。コンボボックスがあり、選択したコンボボックスに基づいて別のことをしたいのですが。私は別々のvue.htmlとtypescriptファイルを使用しています。これが私のコードです。 <select name="LeaveType" @change="onChange()" class="form-control"> <option value="1">Annual Leave/ Off-Day</option> <option value="2">On Demand Leave</option> </select> これが私のtsファイルです onChange(value) { console.log(value); } typescript関数で選択したオプション値を取得するにはどうすればよいですか？ありがとう。

108 javascript  html  asp.net-mvc  vue.js 

ループをv-forX（例：10）回繰り返すにはどうすればよいですか？ // want to repeat this (e.g.) 10 times <ul> <li v-for="item in shoppingItems"> {{ item.name }} - {{ item.price }} </li> </ul> ドキュメントは示しています： <ul> <li v-for="item in 10">{{ item }}</li> </ul> // or <li v-for="n in 10">{{ n }} </li> // this doesn't work <li v-for="item in 10">{{ item.price …

107 javascript  vue.js  vuejs2  v-for 

私がアクセスできるようにするstate.sessionにはinstance.jsからrecords_view.js。これはどのように達成されますか？ store / modules / instance.js const state = { // This is what I want to access in records_view.js session: {} }; const getters = { sessionGetter: state => state.session }; store / modules / records_view.js const actions = { getSettingsAction (context, props) { // This is how I'm …

106 javascript  vue.js  vuex 

Vue.js変数を画像URLと連結したい。 私が計算したもの： imgPreUrl : function() { if (androidBuild) return "android_asset/www/"; else return ""; } 私がアンドロイド用にビルドした場合： <img src="/android_asset/www/img/logo.png"> そうしないと <img src="img/logo.png"> 計算された変数をURLと連結するにはどうすればよいですか？ 私はそれを試してみました： <img src="{{imgPreUrl}}img/logo.png">

105 javascript  vue.js  vuejs2 

特定のコンポーネントにルーティングする方法は2つあります。1つはパラメーターあり、もう1つはパラメーターなしです。オプションのパラメーターを検索しましたが、どういうわけか多くの情報を見つけることができません。 だから私のルート： { path: '/offers/:member', component: Offers, name: 'offers', props: true, meta: { guest: false, needsAuth: true } }, プログラムでparamを使用して呼び出すと、すべて問題ありません this.$router.push({ path: /offers/1234 }); ただし、このようにナビで呼び出す必要もあります <router-link to="/offers">Offers</router-link> offersコンポーネントは、小道具を受け入れます props: ['member'], そのように使用されるコンポーネント <Offers :offers="data" :member="member"></Offers> さて、私がうまく機能させるための醜い方法は、ルートを複製して、そのうちの1つを小道具を使わないようにすることです。 { path: '/offers', component: Offers, name: 'offers', props: false, meta: { guest: false, needsAuth: true …

105 vue.js 

vue.jsの要素にカーソルを合わせるとdivが表示されます。しかし、私はそれを機能させるようには思えません。 vue.jsにホバーまたはマウスオーバーのイベントがないようです。これは本当ですか？ jquery hoverメソッドとvueメソッドを組み合わせることが可能でしょうか？

104 javascript  vue.js 

私は動的なビューを持っています： <div id="myview"> <div :is="currentComponent"></div> </div> 関連付けられたVueインスタンス： new Vue ({ data: function () { return { currentComponent: 'myComponent', } }, }).$mount('#myview'); これにより、コンポーネントを動的に変更できます。 ：私の場合、私は、3つの異なる要素を持っているmyComponent、myComponent1とmyComponent2。そして、私はこのようにそれらを切り替えます： Vue.component('myComponent', { template: "<button @click=\"$parent.currentComponent = 'myComponent1'\"></button>" } では、小道具をに渡したいと思いmyComponent1ます。 コンポーネントタイプをに変更するときに、これらの小道具をどのように渡すことができmyComponent1ますか？

104 javascript  vue.js  vuejs2  vue-component 

Vue-cliプロジェクトのポート番号を変更して、8080ではなく別のポートで実行されるようにする方法。

104 vue.js  vuejs2  command-line-interface  vue-cli 

ドキュメントを読みましたが、理解できません。私はどのデータ、計算、監視、メソッドが行うのか知っていますが、nextTick()vuejsで何が使用されますか？

104 vue.js  vuejs2 

私はこのプルリクエストで見ます： 追加する router.reload() 現在のパスでリロードし、データフックを再度呼び出します しかし、Vueコンポーネントから次のコマンドを発行しようとすると： this.$router.reload() このエラーが発生します： Uncaught TypeError: this.$router.reload is not a function ドキュメントを検索しましたが、関連するものが見つかりませんでした。vue / vue-routerプロバイダーはこのような機能を提供していますか？ 私が興味を持っているソフトウェアのバージョンは次のとおりです。 "vue": "^2.1.0", "vue-router": "^2.0.3", PS。私が知っているlocation.reload()選択肢の一つですが、私はネイティブVueのオプションを探しています。

101 vue.js  vue-router  vuejs2 

質問： 単一の@clickで複数の関数を呼び出す方法は？（別名v-on:click）？ 私は試した 関数をセミコロンで分割します<div @click="fn1('foo');fn2('bar')"> </div>。 いくつかを使用し@clickます<div @click="fn1('foo')" @click="fn2('bar')"> </div>。 しかし、それを正しく行う方法は？ PS：確かに私はいつでもできる <div v-on:click="fn3('foo', 'bar')"> </div> function fn3 (args) { fn1(args); fn2(args); } しかし、これは時には良くありません。

100 javascript  vue.js