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

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

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, …

10
vue.jsで条件付きで入力を無効にする方法
入力があります: <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> 私のVue.jsコンポーネントには、次のものが含まれています。 .. .. ready() { this.form.name = this.store.name; this.form.validated = this.store.validated; }, .. validatedであるboolean場合、0またはのいずれか1になりますが、データベースに格納されている値に関係なく、私の入力は常に無効になっています。 ifの場合は入力を無効にfalseする必要があります。それ以外の場合は、有効にして編集可能にする必要があります。 更新: これを行うと、常に入力が有効になります(データベースに0か1があるかに関係なく)。 <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? '' : disabled"> これを行うと、常に入力が無効になります(データベースに0か1があるかに関係なく): <input type="text" id="name" class="form-control" name="name" v-model="form.name" :disabled="validated ? disabled …
277 javascript  html  forms  vue.js 

5
Webpackを使用したvue.jsプロジェクトのat( '@')サインインパスを使用したES6インポート
私は新しいvue.jsプロジェクトを開始しているので、vue-cliツールを使用して、新しいWebpackプロジェクト(つまりvue init webpack)を足場しました。 生成されたファイルを調べていると、src/router/index.jsファイルに次のインポートが含まれていることに気付きました。 import Vue from 'vue' import Router from 'vue-router' import Hello from '@/components/Hello' // <- this one is what my qusestion is about Vue.use(Router) export default new Router({ routes: [ { path: '/', name: 'Hello', component: Hello } ] }) これまでに@パスのアットマーク()を見たことがない。私はそれが相対パスを許可しているのではないかと思っています(たぶん?)。 オンラインで検索してみましたが、説明が見つかりませんでした( "アットマーク"を検索するか、リテラル文字を使用し@ても検索条件として役に立たないためです)。 @このパスでは何をしますか(ドキュメントへのリンクは素晴らしいでしょう)、これはes6のものですか?ウェブパックのこと?ビューローダーのこと? 更新 Felix Klingに、この同じ質問について別の重複したStackoverflow質問/回答を教えてくれてありがとう。 …

9
URLからハッシュバングを削除する方法?
#!URLからハッシュバングを削除する方法? Vueルーターのドキュメント(http://vuejs.github.io/vue-router/en/options.html)にハッシュバングを無効にするオプションが見つかりましたが、このオプションは削除されます#!れて# きれいなURLを取得する方法はありますか? 例: しない: #!/home だが: /home
257 vue.js  vue-router 

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: ...}動作していません。



10
コンポーネントの外部からVue.jsコンポーネントメソッドを呼び出す
子コンポーネントを持つメインVueインスタンスがあるとします。これらのコンポーネントの1つに属するメソッドをVueインスタンスの外部から完全に呼び出す方法はありますか? 次に例を示します。 var vm = new Vue({ el: '#app', components: { 'my-component': { template: '#my-template', data: function() { return { count: 1, }; }, methods: { increaseCount: function() { this.count++; } } }, } }); $('#external-button').click(function() { vm['my-component'].increaseCount(); // This doesn't work }); <script src="http://vuejs.org/js/vue.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="app"> <my-component></my-component> …
229 javascript  vue.js 

5
Vue.js-v-modelとv-bindの違い
私はオンラインコースでVueを学習しています。インストラクターは、デフォルト値で入力テキストを作成する練習をしてくれました。v-modelを使用して完成させましたが、インストラクターがv-bind:valueを選択しましたが、その理由がわかりません。 誰かがこれらの2つの違いと、それぞれを使うほうが良いときについて簡単な説明をくれますか?

10
Vue.Jsの計算されたプロパティにパラメーターを渡すことはできますか
これは、Vue.Jsの計算されたプロパティでパラメーターを渡すことが可能ですか?ゲッター/セッターが計算されたものを使用すると、パラメーターを取得して変数に割り当てることができます。ドキュメントからここのように: // ... computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = newValue.split(' ') this.firstName = names[0] this.lastName = names[names.length - 1] } } } // ... これも可能ですか? // ... computed: { …

5
Vue.jsでエスケープされていないHTMLを表示する
moustacheバインディング内でHTMLを解釈させるにはどうすればよいですか?現時点では休憩(<br />)は表示/エスケープされています。 Small Vueアプリ: var logapp = new Vue({ el: '#logapp', data: { title: 'Logs', logs: [ { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 }, { status: true, type: 'Import', desc: 'Learn<br />JavaScript', date: '11.11.2015', id: 1 } ] } }) そして、これがテンプレートです: <div id="logapp"> <table> …
189 javascript  html  vue.js 

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') …

1
Vue.jsで作成されたイベントとマウントされたイベントの違い
Vue.jsのドキュメントでは、createdおよびmountedイベントについて次のように説明しています。 created インスタンスの作成後に同期的に呼び出されます。この段階で、インスタンスはオプションの処理を完了しています。つまり、データ監視、計算されたプロパティ、メソッド、監視/イベントコールバックが設定されています。ただし、マウント段階はまだ開始されておらず、$ elプロパティはまだ利用できません。 mounted インスタンスがマウントされた直後に呼び出され、elは新しく作成されたvm。$ elに置き換えられます。ルートインスタンスがドキュメント内要素にマウントされている場合、mountが呼び出されたときにvm。$ elもドキュメント内になります。 このフックは、サーバー側のレンダリング中には呼び出されません。 理論は理解していますが、実践に関して2つの質問があります。 created使用されるケースはありますmountedか? created実際の(実際のコード)状況で、何のためにイベントを使用できますか?
181 javascript  vue.js 

24
Vue 2-ミューティングプロップvue-warn
https://laracasts.com/series/learning-vue-step-by-stepシリーズを開始しました。レッスンVue、Laravel、AJAXで次のエラーで停止しました: vue.js:2574 [Vue warn]:親コンポーネントが再レンダリングされるたびに値が上書きされるため、プロップを直接変更しないでください。代わりに、プロップの値に基づいてデータまたは計算されたプロパティを使用します。変更されるプロップ: "リスト"(コンポーネントにあります) main.jsにこのコードがあります Vue.component('task', { template: '#task-template', props: ['list'], created() { this.list = JSON.parse(this.list); } }); new Vue({ el: '.container' }) リストの小道具を上書きしたときの問題はcreated()にあることはわかっていますが、私はVueの初心者なので、修正方法はまったくわかりません。誰でもそれを修正する方法(そして理由を説明してください)を考えていますか?


弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.