タグ付けされた質問 「vue-component」

9
Vue.js-ネストされたデータを適切に監視する方法
小道具のバリエーションを適切に監視する方法を理解しようとしています。ajax呼び出しからデータを受け取る親コンポーネント（.vueファイル）があり、データをオブジェクト内に配置し、それを使用してv-forディレクティブを介していくつかの子コンポーネントをレンダリングします（実装の簡略化の下）。 <template> <div> <player v-for="(item, key, index) in players" :item="item" :index="index" :key="key""> </player> </div> </template> ...そして<script>タグの内側： data(){ return { players: {} }, created(){ let self = this; this.$http.get('../serv/config/player.php').then((response) => { let pls = response.body; for (let p in pls) { self.$set(self.players, p, pls[p]); } }); } アイテムオブジェクトは次のとおりです。 item:{ prop: value, …
13
「小道具」の変更をリッスンする方法
でVueJs 2.0ドキュメント私が上でリッスンする任意のフック見つけることができませんprops変更を。 VueJにはそのようなフックがありonPropsUpdated()ますか？ 更新 @wostexが示唆したように、私はwatch自分の財産を試しましたが、何も変わりませんでした。それから私は特別なケースがあることに気づきました： <template> <child :my-prop="myProp"></child> </template> <script> export default { props: ['myProp'] } </script> myProp親コンポーネントがコンポーネントに受け取ることを渡しchildます。その後、watch: {myProp: ...}動作していません。
7
Vue v-on：clickがコンポーネントで機能しない
コンポーネント内でon clickディレクティブを使用しようとしていますが、機能しないようです。コンポーネントをクリックしても、コンソールで「テストクリック」が行われるはずなのに何も起こりません。コンソールにエラーが表示されないので、何が問題なのかわかりません。 index.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>vuetest</title> </head> <body> <div id="app"></div> <!-- built files will be auto injected --> </body> </html> App.vue <template> <div id="app"> <test v-on:click="testFunction"></test> </div> </template> <script> import Test from './components/Test' export default { name: 'app', methods: { testFunction: function (event) { console.log('test clicked') …
13
vuejsは子コンポーネントから親データを更新します
私はvuejs（2.0）で遊んでいます。1つのコンポーネントを含む単純なページを作成しました。ページには、データを含む1つのVueインスタンスがあります。そのページで、コンポーネントを登録してhtmlに追加しました。コンポーネントには1つありinput[type=text]ます。その値を親（メインVueインスタンス）に反映させたい。 コンポーネントの親データを正しく更新するにはどうすればよいですか？バインドされた小道具を親から渡すのはよくなく、コンソールにいくつかの警告をスローします。彼らは彼らのドキュメントに何かを持っていますが、それは機能していません。
12
外部JSスクリプトをVueJSコンポーネントに追加する方法
支払いゲートウェイには2つの外部スクリプトを使用する必要があります。現在、両方がindex.htmlファイルに入れられています。ただし、これらのファイルを最初にロードしたくありません。支払いゲートウェイは、ユーザーが特定のコンポーネントを開いたときにのみ必要です（using router-view）。 とにかくこれを達成する方法はありますか？
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 } ？
5
Vue「デフォルトのエクスポート」と「新しいVue」の比較
Vueをインストールし、いくつかのチュートリアルに従って、vue-cli webpackテンプレートを使用してプロジェクトを作成しました。コンポーネントを作成すると、次の内部でデータがバインドされていることに気づきました。 export default { name: 'app', data: [] } 一方、他のチュートリアルでは、データがバインドされているのがわかります。 new Vue({ el: '#app', data: [] )} 違いは何ですか、なぜ2つの構文が異なるように見えるのですか？vue-cliによって生成されたApp.vueから使用しているタグの内側から「新しいVue」コードを機能させるのに問題があります。
6
VueJs 2.0の兄弟コンポーネント間の通信
概観 Vue.js 2.xでは、model.syncされる非推奨。 では、Vue.js 2.xの兄弟コンポーネント間で通信する適切な方法は何ですか？ バックグラウンド 私がVue 2.xを理解しているように、兄弟通信の好ましい方法は、ストアまたはイベントバスを使用することです。 エヴァン（ヴューの創設者）によると： また、データフローが最終的に追跡できなくなり、デバッグが非常に困難になるため、「コンポーネント間でのデータの受け渡し」は一般に悪い考えです。 データの一部を複数のコンポーネントで共有する必要がある場合は、 グローバルストアまたはVuexを使用してください。 [ ディスカッションへのリンク ] そして： .onceおよび.sync非推奨です。小道具は常に一方通行です。親スコープで副作用を生成するには、コンポーネントはemit暗黙的なバインディングに依存するのではなく、イベントを明示的に指定する必要があります。 したがって、Evan は$emit()およびの使用を推奨してい$on()ます。 懸念 私が心配しているのは： それぞれがグローバルな可視性storeをevent持っています（私が間違っている場合は修正してください）。 マイナーなコミュニケーションごとに新しいストアを作成するのはもったいないです。 私が欲しいのは、兄弟コンポーネントのスコープ eventsまたはstores可視性です。（あるいは、おそらく私は上記の考えを理解していませんでした。） 質問 では、兄弟コンポーネント間で通信するための正しい方法は何ですか？
4
Vuex-計算されたプロパティ「名前」が割り当てられましたが、セッターがありません
いくつかのフォーム検証を備えたコンポーネントがあります。これは、複数ステップのチェックアウトフォームです。以下のコードは最初のステップです。ユーザーがテキストを入力したことを検証し、名前をグローバル状態で保存してから、次のステップに送信します。私は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" …
4
VueJSの動的コンポーネントに動的に小道具を渡す
私は動的なビューを持っています： <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ますか？
12
[Vue警告]：プロパティまたはメソッドはインスタンスで定義されていませんが、レンダリング中に参照されます
var MainTable = Vue.extend({ template: "<ul>" + "<li v-for='(set,index) in settings'>" + "{{index}}) " + "{{set.title}}" + "<button @click='changeSetting(index)'> Info </button>" + "</li>" + "</ul>", data: function() { return data; } }); Vue.component("main-table", MainTable); data.settingsSelected = {}; var app = new Vue({ el: "#settings", data: data, methods: { changeSetting: function(index) …
6
属性内の補間を解決する方法は削除されました。vバインドまたはコロンの省略形を使用しますか？Vue.JS 2
私のvueコンポーネントは次のとおりです： <template> <div> <div class="panel-group" v-for="item in list"> ... <div class="panel-body"> <a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne"> Show </a> </div> <div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel"> ... </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... …
8
Vueコンポーネントで通貨をフォーマットするにはどうすればよいですか？
私のVueコンポーネントは次のようなものです： <template> <div> <div class="panel-group"v-for="item in list"> <div class="col-md-8"> <small> Total: <b>{{ item.total }}</b> </small> </div> </div> </div> </template> <script> export default { ... computed: { list: function() { return this.$store.state.transaction.list }, ... } } </script> 結果{{ item.total }}は 26000000 しかし、私はそれをこのようにフォーマットしたい： 26.000.000,00 jqueryまたはjavascriptで、私はそれを行うことができます しかし、vueコンポーネントでそれを行う方法は？
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.