タグ付けされた質問 「vuejs2」

VueJSでは、v-ifを使用してDOM要素を追加または削除できます。 <button v-if="isRequired">Important Button</button> しかし、dom要素の属性を追加/削除する方法はあります。たとえば、次の場合、必要な属性を条件付きで設定します。 Username: <input type="text" name="username" required> 次のようなもので： Username: <input type="text" name="username" v-if="name.required" required> 何か案は？

119 javascript  vue.js  vuejs2 

私のアプリはユーザー認証に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 

ループを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 

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 

シンプルVueのを考えてみましょうブログ： 私は私のデータストアとしてVuexを使用してだと私は2つの設定する必要がありゲッター：getPost取得するためのゲッターpostIDでの、だけでなく、listFeaturedPosts各機能のポストの最初の数文字を返します。注目の投稿リストのデータストアスキーマは、IDによって投稿を参照します。これらのIDは、抜粋を表示するために実際の投稿に解決する必要があります。 store / state.js export const state = { featuredPosts: [2, 0], posts: [ 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', 'Lorem et ipsum dolor sit amet', ] } store / getters.js …

105 vuejs2  vuex 

私は動的なビューを持っています： <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 

私は、私の場合持っているVue.jsとwebpackウェブアプリ、私はダイナミックな画像を表示する必要があります。img画像のファイル名が変数のどこに保存されているかを示したい。その変数は、に非同期で入力されているストア変数をcomputed返すプロパティです。VuexbeforeMount <div class="col-lg-2" v-for="pic in pics"> <img v-bind:src="'../assets/' + pic + '.png'" v-bind:alt="pic"> </div> ただし、次のようにすると完全に機能します。 <img src="../assets/dog.png" alt="dog"> 私の場合はこのフィドルに似ていますが、ここではimg URLで機能しますが、実際のファイルパスを使用した場合は機能しません。 それを行う正しい方法は何ですか？

99 javascript  html  vue.js  vuejs2 

Vue.js 2.0は、孫から祖父母のコンポーネントにイベントを発行しないようです。 Vue.component('parent', { template: '<div>I am the parent - {{ action }} <child @eventtriggered="performAction"></child></div>', data(){ return { action: 'No action' } }, methods: { performAction() { this.action = 'actionDone' } } }) Vue.component('child', { template: '<div>I am the child <grand-child></grand-child></div>' }) Vue.component('grand-child', { template: '<div>I am the grand-child <button …

98 javascript  vuejs2  vue.js 

データのフィルタリングに役立つ機能があります。v-on:changeユーザーが選択を変更したときに使用していますが、ユーザーがデータを選択する前でも関数を呼び出す必要があります。AngularJS以前の使用でng-initも同じことをしましたが、そのようなディレクティブがないことを理解していますvue.js これは私の機能です： getUnits: function () { var input = {block: this.block, floor: this.floor, unit_type: this.unit_type, status: this.status}; this.$http.post('/admin/units', input).then(function (response) { console.log(response.data); this.units = response.data; }, function (response) { console.log(response) }); } ではblade、ファイルIは、フィルタを実行するために、ブレードのフォームを使用します。 <div class="large-2 columns"> {!! Form::select('floor', $floors,null, ['class'=>'form-control', 'placeholder'=>'All Floors', 'v-model'=>'floor', 'v-on:change'=>'getUnits()' ]) !!} </div> <div class="large-3 columns"> …

97 javascript  vue.js  vuejs2