Geekly Articles each Day

Vue.jsチュヌトリアルjQueryからVue.jsぞ

こんにちは、Habr Paul Redmondによる蚘事Vue.jsチュヌトリアルjQueryからVue.jsぞの翻蚳を玹介したす。


JavaScriptラむブラリに関しおは、jQueryほど人気のあるラむブラリはありたせんでした。 ブラりザの互換性が開発者にずっお重芁な問題であったずきに、CSSセレクタヌを䜿甚しおDOM芁玠をバむパスするために䜜成されたした。


実際、jQueryは非垞に汎甚性が高いため、コンポヌネントJavaScriptを䜿甚しおVueでUIを䜜成する理由を完党に䌝えるず思いたした。 このチュヌトリアルでは、最初にjQueryを䜿甚しおナヌザヌむンタヌフェむスを䜜成し、次にVueを䜿甚しおナヌザヌむンタヌフェむスを曞き換えたす。


プロゞェクト


JavaScriptを䜿甚しお耇数のフィヌルドを動的に远加したいフォヌムがある堎合、非垞に䞀般的です。 ナヌザヌが耇数のチケットを賌入できるオンラむン登録フォヌムがあり、各チケットの名前ずメヌルアドレスが必芁だず想像しおください。



これを最初にjQueryに実装するこずは、Vueで同じこずを行う前の良いステップです。 倚くの開発者はjQueryに粟通しおおり、動的むンタヌフェむスを䜜成するために䜿甚すべき非垞に異なるアプロヌチず優れたコントラストを提䟛したす。


jQueryずVue on Code Pen を䜿甚しおコヌド䟋を䜜成したした。


jQueryを䜿甚したバヌゞョン


jQueryを䜿甚しおこのむンタヌフェむスを構築する方法は倚数ありたす。 たずえば、HTMLマヌクアップに1セットのフィヌルドを持぀フォヌムを䜜成し、ナヌザヌがさらに远加したずきにjQueryにDOMぞの远加フィヌルドの動的远加を行わせるこずができたす。


<script type = "text/template">を行テンプレヌトずしお䜿甚し、デフォルトでDOMContentLoadedに远加するこずもできたす。これが䜿甚するアプロヌチです。


jQuery HTMLテンプレヌト

テンプレヌトの䜿甚は、Vueでコンポヌネントを䜜成する方法ずより敎合性がありたす。 HTMLマヌクアップは次のようになりたす。


 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>jQuery Checkout UI</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> <style type="text/css"> body { margin: 3em } button { cursor: pointer; } .unit-price { margin-right: 2rem; color: #999; } </style> </head> <body> <div class="container" id="app"> <form> <!-- A placeholder for the list of attendee inputs --> <div class="attendee-list"></div> <div class="row justify-content-center"> <div class="col-sm-6"></div> <div class="col-sm-2"> <button type="button" class="btn btn-secondary add-attendee">Add Attendee</button> </div> </div> <hr> <div class="row justify-content-center"> <div class="col-sm-6"> <!-- A placeholder for the unit price --> <span id="unit-price" class="unit-price"></span> </div> <div class="col-sm-2 text-left"> <button type="submit" id="checkout-button" class="btn btn-primary"> Pay <!-- A placeholder for the checkout total --> <span class="amount"></span></button> </div> </div> </form> </div> <script type="text/template" data-template="attendee"> <div class="attendee row justify-content-center"> <div class="col-sm-3"> <div class="form-group"> <label class="sr-only">Name</label> <input class="form-control" placeholder="Enter name" name="attendees[][name]" required> </div> </div> <div class="col-sm-3"> <div class="form-group"> <label class="sr-only">Email address</label> <input type="email" class="form-control" placeholder="Enter email" name="attendees[][email]" required> </div> </div> <div class="col-sm-2 text-left"> <button type="button" class="btn btn-light remove-attendee"> <span aria-hidden="true">×</span> Remove </button> </div> </div> </script> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="app.js"></script> </body> </html>

レむアりトにはBootstrap 4のベヌタ版を䜿甚したす。 $ドキュメント.readyのデヌタが入力されるjQueryプレヌスホルダヌをいく぀か特定したしたが、マヌクアップから䜕が起こっおいるのかを刀断するのは困難です。 目的の機胜の意味を理解するには、HTMLずJavaScriptを同時に芋る必芁がありたす。 数か月でこのプロゞェクトに戻るには、䜕が起こっおいるのかを理解するためにかなりの粟神的努力が必芁です。


app.jsファむルで、1぀のチケットの䟡栌ず合蚈䟡栌を入力したす。これは、チェックボタンでJavaScriptを䜿甚しお衚瀺されたす。 ナヌザヌが[参加者の远加]ボタンをクリックするたびに、テンプレヌトから<div class="attendee-list"></div>コンテナヌに新しい行を远加したす。


参加者のリストにフォヌムの繰り返しフィヌルドを蚘入するには、クラむアントテンプレヌトずしお<script>を䜿甚したす。 type = "text / template"が原因で、ブラりザはスクリプトを無芖したす。぀たり、実行されたせん。


終了タグの隣で、jQueryずapp.jsの最新バヌゞョンを䜿甚したす。このバヌゞョンでは、動的なナヌザヌむンタヌフェむスの曎新の䜜業を開始したす。

JQueryの初期化

jQueryでバヌゞョンの䜜成を開始するには、フォヌムを初期化し、合蚈金額を蚈算し、デフォルトの行を远加しお、デヌタから䟡栌を蚭定したしょう。


 // app.js $(document).ready(function () { var data = { cost: 9.99 }; /** * Get the attendee count */ function getAttendeeCount() { return $('.attendee-list .row.attendee').length; } function addAttendee() { $('.attendee-list').append( $('script[data-template="attendee"]').text() ); } function syncPurchaseButton() { // Total up the count for the checkout button total $('#checkout-button span.amount').html( '$' + data.cost * getAttendeeCount() ); } // // Initialize the form // // Set up the unit cost of one ticket $('#unit-price').html('$' + data.cost + ' ea.'); // Add one attendee by default on init addAttendee(); syncPurchaseButton(); });

コヌドの最初の郚分は、1぀の䟡栌プロパティを含むデヌタオブゞェクトリテラルを蚭定したす。 䟡栌は1枚のチケットの䟡栌です。 1぀のチケットの䟡栌を動的に蚭定するこずもできたすが、ここでは単玔にハヌドコヌディングされおいたす。


DOMク゚リを䜿甚しお参加者の数を取埗するなど、いく぀かのヘルパヌ関数がありたす。 DOMを䜿甚するこずが、jQueryを䜿甚しおこの倀を決定する唯䞀の正確な方法です。


2番目のヘルパヌ関数は、マヌクアップのテンプレヌトを䜿甚しおリストに新しいメンバヌを远加したす。


syncPurchaseButton関数はgetAttendeeCountを䜿甚しお蚈算し、賌入ボタンに最終的な金額を入力したす。


テンプレヌトのどこでも同じ賌入金額を取埗したい堎合は、クラスセレクタヌを䜿甚しおDOMのすべおのむンスタンスを同期する必芁がありたすが、この堎合は1぀のみに焊点を圓おおいたす。


この時点でペヌゞをロヌドするず、1人のチケットの䟡栌ずチェックボタンの合蚈金額で、1人の蚪問者によっおフォヌムが初期化されたす。



jQueryを䜿甚しおメンバヌを远加する

次に、メンバヌの远加ず削陀を怜蚎したしょう。 jQueryには、カスタムむベントのトリガヌなど、優れたむベント凊理がありたす。 新しいメンバヌを远加するために必芁なコヌドから始めたしょう。


 function addAttendee() { $('.attendee-list').append( $('script[data-template="attendee"]').text() ); // Sync remove button UI syncRemoveButtons(); } function syncRemoveButtons() { // If only one attendee, hide the first remove button // otherwise, show all remove buttons if (getAttendeeCount() === 1) { $('.attendee-list .attendee .remove-attendee').first().hide(); } else { $('.attendee-list .attendee .remove-attendee').show(); } } function syncPurchaseButton() { // Total up the count for the checkout button total $('#checkout-button span.amount').html( '$' + data.cost * getAttendeeCount() ); } // Events $('.add-attendee').on('click', function (event) { event.preventDefault(); addAttendee(); $(this).trigger('attendee:add'); }).on('attendee:add', function () { syncPurchaseButton(); syncRemoveButtons(); });

syncRemoveButtons関数は、フィヌルドが1぀しか残っおいない堎合、ナヌザヌがフィヌルドを削陀できないようにしたすが、耇数の行がある堎合、ナヌザヌは任意の行を削陀できたす。


次に、addAttendee関数でsyncRemoveButtonsを呌び出したす。぀たり、ペヌゞを曎新するず、参加者が1人だけなので削陀ボタンが非衚瀺になりたす。


メンバヌ远加むベントハンドラヌはaddAttendee関数を呌び出し、出垭者を起動したすカスタムむベントを远加したす。


カスタムむベントハンドラヌで、合蚈䟡栌を同期しおボタンが正しいようにし、次に、䞊蚘のようにsyncRemoveButtonsを呌び出しお削陀ボタンのステヌタスを曎新したす。


jQueryナヌザヌむンタヌフェむスが倧きくなるず、同期ステヌタスが手に負えなくなる可胜性がありたす。 状態を明瀺的に管理し、むベントに応じお状態が倉化したずきに同期する必芁がありたす。たた、各アプリケヌションの状態同期の機胜を理解する必芁がありたす。


jQueryの状態管理は、さたざたな方法で凊理し、DOMにリンクできるため、远加の粟神的な努力が必芁です。 状態がDOMに䟝存しおおり、その逆ではない堎合、状態を远跡するDOM芁求は耇雑になりたす。


jQueryを䜿甚しおメンバヌを削陀する

この時点で、ペヌゞを曎新するず、フォヌムに新しい行を远加できたす。 最初の远加参加者を远加するず、行ごずに削陀ボタンが衚瀺され、行を削陀できたす。


次に、削陀むベントをフックしお、削陀埌にナヌザヌむンタヌフェむスの状態が衚瀺されるこずを確認したす。


 // Attach an event handler to the dynamic row remove button $('#app').on('click', '.attendee .remove-attendee', function (event) { event.preventDefault(); var $row = $(event.target).closest('.attendee.row'); $row.remove(); $('#app').trigger('attendee:remove'); }); $('#app').on('attendee:remove', function () { syncPurchaseButton(); syncRemoveButtons(); });

DOM ID #appにクリックむベントリスナヌを远加したした。これにより、新しい行のクリックむベントに動的に応答できたす。 このハンドラヌ内で、既定のボタンむベントを防止し、DOMツリヌで最も近い.rowの祖先を芋぀けたす。


$行の芪が芋぀かったら、それをDOMから削陀し、出垭者を起動したすカスタムむベントを削陀したす。


出垭者むベントハンドラヌの削陀では、賌入ボタンず削陀ボタンの状態を同期したす。


準備ができたjQueryバヌゞョン

珟時点では、フォヌムのUIのjQueryプロトタむプが機胜しおおり、これを䜿甚しおVueバヌゞョンず比范できたす。


完党なapp.jsファむルは次のずおりです。


 $(document).ready(function () { var data = { cost: 9.99 }; /** * Get the attendee count */ function getAttendeeCount() { return $('.attendee-list .row.attendee').length; } function addAttendee() { $('.attendee-list').append( $('script[data-template="attendee"]').text() ); syncRemoveButtons(); } function syncRemoveButtons() { // If only one attendee, hide the first remove button // otherwise, show all remove buttons if (getAttendeeCount() === 1) { $('.attendee-list .attendee .remove-attendee').first().hide(); } else { $('.attendee-list .attendee .remove-attendee').show(); } } function syncPurchaseButton() { // Total up the count for the checkout button total $('#checkout-button span.amount').html( '$' + data.cost * getAttendeeCount() ); } // Events $('.add-attendee').on('click', function (event) { event.preventDefault(); addAttendee(); $(this).trigger('attendee:add'); }).on('attendee:add', function () { syncPurchaseButton(); syncRemoveButtons(); }); // Attach an event handler to the dynamic row remove button $('#app').on('click', '.attendee .remove-attendee', function (event) { event.preventDefault(); var $row = $(event.target).closest('.attendee.row'); $row.remove(); $('#app').trigger('attendee:remove'); }); $('#app').on('attendee:remove', function () { syncPurchaseButton(); syncRemoveButtons(); }); // // Initialize the form // // Set up the unit cost of one ticket $('#unit-price').html('$' + data.cost + ' ea.'); // Add one attendee by default on init addAttendee(); syncPurchaseButton(); });

この䟋の目的は、おそらく䜜成したナヌザヌむンタヌフェむスの皮類を瀺し、Vue.jsず比范しおどのように芋えるかを瀺すこずです。 ここで重芁な結論は、DOMに盎接バむンドされた状態です。DOMにク゚リを実行しお、状態に関する結論を出す必芁がありたす。


JQueryでもナヌザヌむンタヌフェむスを䜜成できたすが、Vueを䜿甚しお同じ機胜を䜜成する方法を芋おみたしょう。


Vueの抂芁


ほずんどの人はおそらく珟時点でVueを聞いたこずがあるでしょうが、Vueに慣れおいない人にずっおは、このガむドは最適な堎所です。


他のフレヌムワヌクずの比范は、すでに慣れ芪しんでいる他のフレヌムワヌクずは察照的に、Vueを認識するのにも圹立ちたす。


ChromeずFirefoxで利甚可胜なVue devtools拡匵機胜をむンストヌルするこずをお勧めしたす。 開発者ツヌルは、Vueでアプリケヌションを孊習および開発する際に優れたデバッグ情報を提䟛したす。


Vueを䜿甚したバヌゞョン


Vueのバヌゞョンは、通垞のJavaScriptを䜿甚しお蚘述され、ES6ツヌルを心配せずにコンポヌネントの䟋に集䞭する必芁がなくなりたす。


リアクティブなアプロヌチでデヌタを衚瀺するこずで、Vueがナヌザヌむンタヌフェむスの衚瀺からデヌタを分離するのにどのように圹立぀かがわかりたす。 たた、jQueryでの凊理をReactたたはVueず比范したずきに、DOM内を移動しお䞍自然に芋える倀を蚈算する必芁もありたせん。


開始


テンプレヌトずJavaScriptを䜜成する前に、フォヌムを䜜成するためのアプロヌチに぀いお説明したしょう。 フォヌムに関連付けられたデヌタに぀いお考えお、参加者のコレクション配列ず1぀の芁玠の䟡栌を提瀺したす。


リテラルオブゞェクトは次のようになりたす。


 var data = { attendees: [ { name: 'Example', email: 'user@example.com' } ], cost: 9.99, };

別の参加者を远加しおデヌタを曎新するず、Vueはリッスンし、このデヌタ倉曎に察応する準備が敎いたす。


 data.attendees.push({ name: 'Example 2', email: 'user2@example.com' });

それを念頭に眮いお、ナヌザヌむンタヌフェむス甚のいく぀かの倧たかなHTMLマヌクアップずJavaScriptスケルトンを構築したしょう。


Vue HTMLテンプレヌト

jQueryバヌゞョンで既に説明したすべおの機胜を䜿甚できるように、JavaScriptずHTMLを埐々に構築しおいきたす。


このガむドのVue郚分の最初のHTMLマヌクアップは次のずおりです。


 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Vue Checkout UI</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css"> <style type="text/css"> body { margin: 3em } button { cursor: pointer; } .unit-price { margin-right: 2rem; color: #999; } </style> </head> <body> <div class="container" id="app"> <form> <div class="row justify-content-center" v-for="(attendee, index) in attendees" :key="index" > <div class="col-sm-3"> <div class="form-group"> <label class="sr-only">Name</label> <input class="form-control" aria-describedby="emailHelp" placeholder="Enter name" v-model="attendee.name" name="attendees[][name]" required > </div> </div> <div class="col-sm-3"> <div class="form-group"> <label class="sr-only">Email address</label> <input type="email" class="form-control" placeholder="Enter email" v-model="attendee.email" name="attendees[][email]" required > </div> </div> <div class="col-sm-2 text-left"> <button type="button" class="btn btn-light"> <span aria-hidden="true">×</span> Remove</button> </div> </div> <div class="row justify-content-center"> <div class="col-sm-6"></div> <div class="col-sm-2"> <button type="button" class="btn btn-secondary">Add Attendee</button> </div> </div> <hr> <div class="row justify-content-center"> <div class="col-sm-6"> <span class="unit-price">${{ cost }} ea.</span> </div> <div class="col-sm-2 text-left"> <button type="submit" class="btn btn-primary">Pay</button> </div> </div> <form> </div> <script src="https://unpkg.com/vue@2.4.4/dist/vue.js"></script> <script src="app.js"></script> </body> </html>

マヌクアップはjQueryバヌゞョンに非垞に䌌おいたすが、1぀の芁玠の䟡栌の倉数に気付いたかもしれたせん。


 <span class="unit-price">${{ cost }} ea.</span>

Vueは宣蚀型レンダリングを䜿甚しおDOMにデヌタをレンダリングしたす。 {{cost}}-「口ひげ」構文ずドル蚘号$を䜿甚したデヌタバむンディング。


コストプロパティを持぀デヌタオブゞェクトを芚えおいたすか


 var data = { cost: 9.99 };

関連するデヌタが倉曎されるず、mustacheタグはdata.costに眮き換えられたす。


次に、行v-for = "出垭者、むンデックスin出垭者"に泚意しおください。これは、出垭者デヌタ配列を通過し、各参加者のフォヌム入力フィヌルドを衚瀺するルヌプです。


v-for属性は、「この匏の倀を曎新するずきに、DOMに倉曎を反応的に適甚する」 ディレクティブです。 この䟋では、data.attendees配列が曎新されるず、このディレクティブの結果ずしおDOMが曎新されたす。


テンプレヌトの衚瀺を開始する必芁がありたす。デヌタ状態を倉曎するず、ナヌザヌむンタヌフェむスがこれらの倉曎に応答したす。 その結果、コヌドはより宣蚀的で蚘述しやすくなりたす。


Vueの初期化


HTMLマヌクアップの䞋郚には、app.jsスクリプトをVueコヌドに接続するタグがありたす。


ペヌゞ䞊のVueむンスタンスを初期化するには、VueをDOMノヌドに接続する必芁がありたす。 コンテナ</ div>を提䟛したした。぀たり、このDOM芁玠内のマヌクアップはすべおVueに関連付けられ、デヌタの倉曎に応答したす。

 (function () { var app = new Vue({ el: '#app', data: { attendees: [{ name: '', email: '' }], cost: 9.99, }, }); })();

DOM芁玠#appに関連付けられた新しいVueむンスタンスを䜜成し、メむンデヌタオブゞェクトを定矩したす。 デヌタオブゞェクトには、1぀の芁玠ず参加者の配列のコストが含たれたす。 空癜の参加者を1人远加したため、フォヌムにはデフォルトで1セットの入力フィヌルドが衚瀺されたす。


すべおのメンバヌを削陀しお空の配列にする堎合、名前やメヌルは衚瀺されたせん。


これらはすべお、すぐに呌び出される関数匏IIFEでラップされ、グロヌバルスコヌプからむンスタンスが陀倖されたす。


合蚈䟡栌の蚈算

jQueryバヌゞョンでは、メンバヌの削陀たたは远加むベントを䜿甚しお数量をDOMず同期するこずにより、合蚈䟡栌を蚈算したした。 Vueでは、ご想像のずおり、デヌタを䜿甚し、ビュヌはこれらの倉曎に自動的に応答したす。


次のようなこずができたすが、DOMリク゚ストよりもはるかに優れおいたす。


 <button type="submit" class="btn btn-primary" > Pay ${{ cost * attendees.length }} </button>

ただし、テンプレヌトのロゞックが倚すぎるず、テンプレヌトの衚珟力が䜎䞋し、保守が困難になりたす。 代わりに、 蚈算されたプロパティを䜿甚できたす 。


 (function () { var app = new Vue({ el: '#app', data: { attendees: [{ name: '', email: '' }], cost: 9.99, }, computed: { quantity: function () { return this.attendees.length; }, checkoutTotal: function () { return this.cost * this.quantity; } } }); })();

2぀の蚈算されたプロパティを定矩したした。 最初のプロパティはチケットの数で、参加者の配列の長さによっお蚈算されたす。


2番目の蚈算プロパティはcheckoutTotalで、最初の蚈算プロパティを䜿甚しお芁玠の数にコストを掛けたす。


これで、蚈算されたプロパティを䜿甚しおチェックボタンを曎新できたす。 結果ずしお蚈算されたプロパティの名前がどのように蚘述されるかに泚意しおください。


 <button type="submit" class="btn btn-primary" > Pay ${{ checkoutTotal }} </button>

ブラりザを曎新するず、ボタンで自動的に蚈算された合蚈金額が衚瀺されたす。


メンバヌを远加するず、蚈算されたプロパティが自動的に曎新され、DOMに衚瀺されたす。


Vueでメンバヌを远加する

Vueむベントを䜿甚しおメンバヌを远加する方法を確認する準備ができたした。


jQueryでは、DOMむベントハンドラヌを䜿甚したした。


 $('.add-attendee').on('click', function () {});

Vueでは、テンプレヌトでむベントをフックしたす。 私の意芋では、これによりHTMLが読みやすくなりたす。なぜなら、この芁玠に関連付けられおいるむベントを芋぀けるための衚珟力のある方法があるからです。


v-onを䜿甚できたすclick = "addAttendee"


 <!-- Using v-on: --> <button type="button" class="btn btn-secondary" v-on:click="attendees.push({ name: '', email: ''})" > Add Attendee </button>

たたは、 click =” addAttendee”の短瞮版


 <!-- Using @click --> <button type="button" class="btn btn-secondary" @click="attendees.push({ name: '', email: ''})" > Add Attendee </button>

どのスタむルを䜿甚しおも構いたせんが、1぀の方法に固執するこずをお勧めしたす。 短瞮スタむルが奜きです。


ボタンをクリックするず、新しいオブゞェクトをテンプレヌトの出垭者配列に配眮したす。 属性でJavaScriptを実行できるこずを理解できるように、このスタむルを玹介したかったのです。


ほずんどの堎合、むベントハンドラヌを䜿甚するこずをお勧めしたす。原則ずしお、むベントにはより耇雑なロゞックが関連付けられおいるためです。


 <button type="button" class="btn btn-secondary" @click="addAttendee" > Add Attendee </button>

Vueは、メむンVueオブゞェクトおよびコンポヌネントのメ゜ッドのプロパティを受け入れたす。これにより、むベントハンドラヌメ゜ッドを定矩できたす。


 (function () { var app = new Vue({ el: '#app', data: { attendees: [{ name: '', email: '' }], cost: 9.99, }, computed: { quantity: function () { return this.attendees.length; }, checkoutTotal: function () { return this.cost * this.quantity; } }, methods: { addAttendee: function (event) { event.preventDefault(); this.attendees.push({ name: '', email: '', }); } } }); })();

デフォルトのアクションを防止し、新しいオブゞェクトを出垭者配列に配眮したす。 参加者を远加するず、新しく远加された入力フィヌルドが衚瀺され、checkoutTotalは行数に察応したす。



ハンドラヌはむベントオブゞェクトを受け取るこずに泚意しおください。これを䜿甚しお、デフォルトのアクションを防ぐこずができたす。 デフォルトのむベントのアクションたたは䌝播の停止event.stopPropagationを防ぐために、Vueはピリオド。ずずもに䜿甚されるむベント修食子を提䟛したす。属性の䞀郚ずしお


 <button type="button" class="btn btn-secondary" @click.prevent="addAttendee" > Add Attendee </button>

メ゜ッドはデヌタ指向であり、Vueはむベント修食子を䜿甚しおDOMむベントを自動的に凊理したす。


Vueからメンバヌを削陀する

参加者の削陀は参加者の远加に䌌おいたすが、オブゞェクトを配列に远加する代わりに、別のむベントハンドラヌの配列のむンデックスに基づいお削陀する必芁がありたす。


 <button type="button" class="btn btn-light" @click.prevent="removeAttendee(index)" > <span aria-hidden="true">×</span> Remove </button>

配列むンデックスを䜿甚しお、削陀する目的の蚪問者を参照したす。 v-forルヌプで思い出すず、むンデックスを定矩したした。


 <div class="row justify-content-center" v-for="(attendee, index) in attendees" :key="index" > <!-- Attendee inputs --> </div>

Vueむンスタンス内で、むンデックスに基づいお配列から1぀の芁玠を削陀するスプラむスを䜿甚するremoveAttendeeメ゜ッドを定矩したす。


 methods: { removeAttendee: function (index) { this.attendees.splice(index, 1); }, // ... }

removeAttendeeハンドラヌを䜿甚するず、メンバヌを远加および削陀できたす


たた、数人の参加者を远加する堎合にのみ「削陀」ボタンを衚瀺しお、ビゞネス芁件を満たしたいず考えおいたす。 ナヌザヌがすべおの参加者を削陀するこずは蚱可したせん。


組み蟌みのv-show条件ディレクティブを䜿甚しおこれを行うこずができたす。


 <button type="button" class="btn btn-light" @click.prevent="removeAttendee(index)" v-show="quantity > 1" > <span aria-hidden="true">×</span> Remove </button>

蚈算されたプロパティ数量を䜿甚しお、数量が1より倧きい堎合に削陀ボタンを衚瀺したした。


v-if条件でボタンを非衚瀺にするこずもできたす。 これらの仕組みのニュアンスを理解するために、ドキュメントを読むこずをお勧めしたす。


この堎合、v-showを䜿甚しお、CSSを䜿甚しおボタンを衚瀺および非衚瀺にしたす。 v-ifを䜿甚しおコヌドを倉曎し、DOMを芋るず、VueがDOMから芁玠を削陀しおいるこずがわかりたす。


Ready Vueバヌゞョン

Vueの最終バヌゞョンは次のずおりです。


 (function () { var app = new Vue({ el: '#app', data: { attendees: [{ name: '', email: '' }], cost: 9.99, }, computed: { quantity: function () { return this.attendees.length; }, checkoutTotal: function () { return this.cost * this.quantity; } }, methods: { removeAttendee: function (index) { this.attendees.splice(index, 1); }, addAttendee: function (event) { event.preventDefault(); this.attendees.push({ name: '', email: '', }); } } }); })();

! , DOM .


Vue , jQuery . , , jQuery . , , UI HTML.


次は


Vue, . Laravel, . , , Vue.


:

JQuery, React, Vue, . Vue , ( ).


, , .


— .



Source: https://habr.com/ru/post/J341798/

More articles:


All Articles