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

多くの（50以上の）単一ファイルコンポーネントを含む Vue 2プロジェクトがあります。ルーティングにはVue-Router、状態にはVuexを使用しています。 helpers.jsと呼ばれるファイルがあり、文字列の最初の文字を大文字にするなどの汎用関数の束が含まれています。このファイルは次のようになります。 export default { capitalizeFirstLetter(str) { return str.charAt(0).toUpperCase() + str.slice(1); } } 私のmain.jsファイルはアプリを初期化します： import Vue from 'vue' import VueResource from "vue-resource" import store from "./store" import Router from "./router" import App from "./components/App.vue" Vue.use(VueResource) const app = new Vue({ router: Router, store, template: '<app></app>', components: { App …

100 vue.js  vue-router 

Наэтотвопросестьответынаスタックオーバーフローнарусском：КаквVUE-ルータоткрытьссылкувновойвкладке？ 概要ページと詳細サブページがあります。すべてのルートは、次のvue-routerようなプログラムナビゲーションを使用して（v 0.7.x）で実装されます。 this.$router.go({ path: "/link/to/page" }) ただし、概要ページからサブページにルーティングする場合は_target="blank"、<a>タグに追加する場合と同じように、新しいタブでサブページを開く必要があります。 これを行う方法はありますか？

99 javascript  vue.js  vue-router 

私は、私の場合持っている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ファイル内にコメントを挿入する必要がありますが、ドキュメントでこれを行う方法がわかりません。 私が試してみました//、/**/、{{-- --}}、および{# #}、それらのどれも動作するようには思えません。 Laravelのブレードを使用しています。だからこれはsample_file.vue： <template> <div class="media"> <like-button :post="post" v-if="post.likedByCurrentUser === false && "></like-button> {{--I want to comment this but I get an error from the gulp watch: post.canBeLikedByCurrentUser === true--}} <div class="media-left"> <a href="#"> <img class="media-object" v-bind:src="post.user.avatar" v-bind:title="post.user.name + ' image from Gravatar'"> </a> </div> <div class="media-body"> <strong>{{ …

98 vue.js  blade  laravel-blade 

Vue javascript内の画像など、静的アセットを参照するための適切なURLを探しています。 たとえば、カスタムアイコン画像を使用してリーフレットマーカーを作成していて、いくつかのURLを試しましたが、すべてが404 (Not Found)：を返します。 Main.vue： var icon = L.icon({ iconUrl: './assets/img.png', iconSize: [25, 25], iconAnchor: [12, 12] }); 画像をアセットフォルダーと静的フォルダーに入れてみましたが、うまくいきませんでした。どういうわけかそれらの画像をロードするようにvueに指示する必要がありますか？

98 javascript  vue.js  leaflet 

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 

したがって、小道具をVueコンポーネントに渡したいのですが、これらの小道具は将来、そのコンポーネントの内部から変更されることを期待しています。たとえば、AJAXを使用して内部からそのVueコンポーネントを更新した場合です。したがって、これらはコンポーネントの初期化のみを目的としています。 私のcars-list私は初期特性と小道具を渡すVueの構成要素single-car： // cars-list.vue <script> export default { data: function() { return { cars: [ { color: 'red', maxSpeed: 200, }, { color: 'blue', maxSpeed: 195, }, ] } }, } </script> <template> <div> <template v-for="car in cars"> <single-car :initial-properties="car"></single-car> </template> </div> </template> 私が今それを行う方法は、私のsingle-carコンポーネント内でon 初期化フックに割り当てthis.initialPropertiesているということです 。そしてそれは機能し、反応します。this.data.propertiescreated() // single-car.vue <script> export …

97 javascript  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 

私はVue.jsを学んでいます。Vueには、テキストフィールドとボタンがあります。デフォルトでは、このボタンは、誰かがキーボードのEnterキーを押すとフォームを送信します。誰かがテキストフィールドに入力しているときに、押された各キーをキャプチャしたいと思います。キーが「@」記号の場合、何か特別なことをしたいと思います。押されたキーが「Enter」キーの場合、私も何か特別なことをしたいと思います。後者は私に挑戦を与えるものです。現在、私はこのフィドルを持っています。これには次のコードが含まれています。 new Vue({ el: '#myApp', data: { emailAddress: '', log: '' }, methods: { validateEmailAddress: function(e) { if (e.keyCode === 13) { alert('Enter was pressed'); } else if (e.keyCode === 50) { alert('@ was pressed'); } this.log += e.key; }, postEmailAddress: function() { this.log += '\n\nPosting'; } }); 私の例では、フォームを送信せずに「Enter」キーを押すことはできないようです。それでも、validateEmailAddress関数をキャプチャできるように、少なくとも最初に関数が起動することを期待します。しかし、それは起こっていないようです。私は何が間違っているのですか？

97 javascript  vue.js 

サーバーと通信してデータをフェッチするすべての関数をVueJSの単一の再利用可能なファイルに配置したいと考えています。 プラグインは最善の選択肢ではないようです。テンプレートの少ないコンポーネント..？

95 service  vue.js  vuejs2 

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

95 javascript  vue.js  vuejs2  vue-component 

ネストされたコンポーネントが2つありますが、親から子メソッドにアクセスする適切な方法は何ですか？ this.$children[0].myMethod() トリックをしているように見えますが、それはかなり醜いですよね、もっと良い方法は何ですか？ <script> import child from './my-child' export default { components: { child }, mounted () { this.$children[0].myMethod() } } </script>

95 javascript  vue.js 

次のようなVueインスタンスがあるとします。 new Vue({ el: '#app', data: { word: 'foo', }, filters: { capitalize: function(text) { return text.replace(/(?:^|\s)\S/g, function(a) { return a.toUpperCase(); }); } }, methods: { sendData: function() { var payload = this.$filters.capitalize(this.word); // how? } } } 次のようなテンプレートでフィルターを簡単に使用できます。 <span>The word is {{ word | capitalize }}</span> しかし、インスタンスメソッドまたは計算されたプロパティ内からこのフィルターを使用するにはどうすればよいですか？（明らかに、この例は簡単で、実際のフィルターはもっと複雑です）。

95 javascript  vue.js 

Vue.jsを使用してテーブルを作成しており、onClickを渡す行ごとにイベントを定義したいと思いますcontactID。コードは次のとおりです。 <tr v-for="item in items" class="static" v-bind:class="{'evenRow': item.oddeven=='1', 'oddRow': item.oddeven=='0' }" @click="addToCount('{item.contactID}')" > <td>{{item.contactName}}</td> <td>{{item.recipient}}</td> </tr> 行をクリックするとaddToCount()、呼び出しが行われ、動作しています。私が渡したいitem.contactIDにaddToCount()。誰かがこれの正しい構文を提案できますか？

94 vue.js 

画像のsrcを要素にバインドしようとしていますが、機能していないようです。「無効な式。生成された関数本体：{backgroundImage：{url（image）}」が表示されます。 ドキュメントには、「ケバブ・ケース」や「キャメルケース」のいずれかを使用することを言います。 <div class="circular" v-bind:style="{ backgroundImage: { url(image) }"></div> ここにフィドルがあります：https：//jsfiddle.net/0dw9923f/2/

93 javascript  html  css  vue.js