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

Vue.jsは、徐々に採用できるようにすることを目的としたユーザーインターフェイスを構築するためのオープンソースのプログレッシブJavascriptフレームワークです。Vue.jsは主にフロントエンド開発に使用され、中間レベルのHTMLおよびCSSが必要です。Vue.jsバージョン固有の質問は、[vuejs2]または[vuejs3]でタグ付けする必要があります。

13
Vuexアクションvsミューテーション
Vuexでは、「アクション」と「ミューテーション」の両方を持つロジックは何ですか？ 状態を変更できないコンポーネントのロジックを理解しています（スマートなようです）が、アクションとミューテーションの両方を持っていると、ある関数を記述して別の関数をトリガーし、次に状態を変更しているようです。 「アクション」と「ミューテーション」の違いは何ですか、それらはどのように連携しますか。さらに、なぜVuex開発者がこのように行うことにしたのか不思議です。
173 vue.js  vuex 
17
vue.js 2 vuexからストア値を監視する方法
一緒に使っvuexてvuejs 2います。 私はに不慣れです。変数の変化vuexを見たいのstoreですが。 にwatch関数を追加したいvue component これは私がこれまでに持っているものです： import Vue from 'vue'; import { MY_STATE, } from './../../mutation-types'; export default { [MY_STATE](state, token) { state.my_state = token; }, }; に変更があるかどうか知りたい my_state store.my_statevuejsコンポーネントでどのように監視しますか？
6
[Vue warn]：要素が見つかりません
私はVuejsを使用しています。これは私のマークアップです： <body> <div id="main"> <div id="mainActivity" v-component="{{currentActivity}}" class="activity"></div> </div> </body> これは私のコードです： var main = new Vue({ el: '#main', data: { currentActivity: 'home' } }) ; ページをロードすると、次の警告が表示されます。 [Vue warn]: Cannot find element: #main 何が悪いのですか？
166 javascript  mvvm  vue.js 
9
親イベントで子コンポーネントの関数を呼び出す方法
環境 Vue 2.0では、ドキュメントやその他のドキュメントは、親から子への通信が小道具を介して行われることを明確に示しています。 質問 親はどのようにイベントが小道具を介して起こったことを子供に伝えますか？ イベントという小道具を見ればいいですか？それは正しくありませんし、代替案もありません（$emit/ $onは親から子へ、ハブモデルは遠方の要素へです）。 例 親コンテナがあり、APIで特定のアクションを実行しても問題がないことを子コンテナに通知する必要があります。関数をトリガーできるようにする必要があります。
3
@clickとv-on：click Vuejsの違い
質問は十分に明確でなければなりません:)。しかし、私は誰かが使用することがわかります： <button @click="function()">press</button> 誰かが使用する： <button v-on:click="function()">press</button> しかし、実際には2つ（存在する場合）の違いは何ですか
2
名前空間を持つ2つのvuexモジュール間でアクションをディスパッチする方法はありますか？
名前空間を持つモジュール間でアクションをディスパッチすることは可能ですか？ たとえば、vuexモジュール「gameboard」と「notification」があります。それぞれに名前空間があります。ゲームボードから通知モジュールにアクションをディスパッチしたいのですが。 次のように、モジュール名をディスパッチアクション名に使用できると思いました。 // store/modules/gameboard.js const actions = { myaction ({dispatch}) { ... dispatch('notification/triggerSelfDismissingNotifcation', {...}) } } // store/modules/notification.js const actions = { triggerSelfDismissingNotification (context, payload) { ... } } しかし、これを実行しようとすると、vuexがゲームボードモジュール内でアクションをディスパッチしようとしているというエラーが発生します。 [vuex]不明なローカルアクションタイプ：notification / triggerSelfDismissingNotification、グローバルタイプ：gameboard / notification / triggerSelfDismissingNotification vuexモジュールからモジュールにディスパッチする方法はありますか、またはルートvuexインスタンスにある種のブリッジを作成する必要がありますか？
159 vue.js  vuejs2  vuex 
3
Vue.jsでv-onにイベントと引数を渡す
パラメータを渡します v-on:inputディレクティブで。渡さない場合は、メソッドでイベントにアクセスできます。関数にパラメーターを渡すときに、イベントにアクセスできる方法はありますか？私がvue-routerを使用しているわけではありません： これは、パラメーターを渡さない場合です。イベントオブジェクトにアクセスできます HTML <input type="number" v-on:input="addToCart" min="0" placeholder="0"> JavaScript methods: { addToCart: function (event) { // I need to access the element by using event.target console.log('In addToCart') console.log(event.target) } } これは、パラメーターを渡す場合です。イベントオブジェクトにアクセスできません HTML <input type="number" v-on:input="addToCart(ticket.id)" min="0" placeholder="0"> JavaScript methods: { addToCart: function (id) { // How can I access …
158 vue.js 
11
ページの読み込み中にVueJS構文を非表示にするにはどうすればよいですか？
多分これは些細な質問です。 そのため、ブラウザーでvuejsアプリケーションを実行すると、ダウンロード速度の調整が可能になります（低接続に設定）。ブラウザで未完成のvue構文出力を取得しました。 ページ全体が読み込まれる前に読み込み画像を表示することでこれをだますことができることはわかっていますが、これを修正する最善の解決策はありますか？
155 javascript  vue.js 
13
vuejsは子コンポーネントから親データを更新します
私はvuejs（2.0）で遊んでいます。1つのコンポーネントを含む単純なページを作成しました。ページには、データを含む1つのVueインスタンスがあります。そのページで、コンポーネントを登録してhtmlに追加しました。コンポーネントには1つありinput[type=text]ます。その値を親（メインVueインスタンス）に反映させたい。 コンポーネントの親データを正しく更新するにはどうすればよいですか？バインドされた小道具を親から渡すのはよくなく、コンソールにいくつかの警告をスローします。彼らは彼らのドキュメントに何かを持っていますが、それは機能していません。
12
外部JSスクリプトをVueJSコンポーネントに追加する方法
支払いゲートウェイには2つの外部スクリプトを使用する必要があります。現在、両方がindex.htmlファイルに入れられています。ただし、これらのファイルを最初にロードしたくありません。支払いゲートウェイは、ユーザーが特定のコンポーネントを開いたときにのみ必要です（using router-view）。 とにかくこれを達成する方法はありますか？
11
forEachはJavaScript配列の関数エラーではありません
私は単純なループを作ろうとしています： const parent = this.el.parentElement console.log(parent.children) parent.children.forEach(child => { console.log(child) }) しかし、私は次のエラーを受け取ります： VM384：53 Uncaught TypeError：parent.children.forEachは関数ではありません たとえparent.childrenログ： 何が問題でしょうか？ 注：これがJSFiddleです。
13
Vue2でデバウンスを実装する方法は？
Vueテンプレートに単純な入力ボックスがあり、多かれ少なかれこのようにデバウンスを使用したいと思います。 <input type="text" v-model="filterKey" debounce="500"> ただし、このdebounceプロパティはVue 2では廃止されました。推奨事項には、「v-on：input +サードパーティのデバウンス機能を使用する」とのみ記載されています。 どのように正しく実装しますか？ lodash、v-on：input、v-modelを使用して実装しようとしましたが、追加の変数なしで実行できるかどうか疑問に思っています。 テンプレート： <input type="text" v-on:input="debounceInput" v-model="searchInput"> スクリプトで： data: function () { return { searchInput: '', filterKey: '' } }, methods: { debounceInput: _.debounce(function () { this.filterKey = this.searchInput; }, 500) } フィルターキーは、後でcomputed小道具で使用されます。
3
Vueデータからhrefに値を渡す方法は？
私はこのようなことをやろうとしています： <div v-for="r in rentals"> <a bind-href="'/job/'r.id"> {{ r.job_title }} </a> </div> の値を属性r.idの最後に追加してhrefAPI呼び出しを行う方法がわかりません。助言がありますか？
141 vue.js  vue-router 
2
Vueコンポーネントの小道具のデフォルト値＆ユーザーが小道具を設定していないかどうかを確認する方法
1. Vue 2のコンポーネントプロップのデフォルト値を設定するにはどうすればよいですか？たとえば、次のmoviesように使用できる単純なコンポーネントがあります。 <movies year="2016"><movies> Vue.component('movies', { props: ['year'], template: '#movies-template', ... } ただし、ユーザーが指定しない場合year： <movies></movies> 次に、コンポーネントはyearプロップのデフォルト値を取ります。 2.また、ユーザーが小道具を設定しなかったかどうかを確認する最良の方法は何ですか？これは良い方法ですか？ if (this.year != null) { // do something } または多分これ： if (!this.year) { // do something } ？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.