Блог

Я пытаюсь создать кнопку, где, если пользователь нажимает кнопку «добавить в корзину» на сайте, счетчик на кнопке «товары в корзине:» увеличивается. Прямо сейчас он этого не делает. Я новичок в Vue, поэтому буду признателен за любую помощь 🙂

Вот мой app.components.js файл

 const Library = Vue.component('Library', {  // this function is run AFTER the props have been passed in  data() {  // without chaining  // let libraryCollection = new LibraryCollection();  // libraryCollection.addItem(new Book('Interaction Design', 200));  // libraryCollection.addItem(new Movie('Paw Patrol!', 78));  // libraryCollection.addItem(new Movie('Harriet', 122));  // libraryCollection.addItem(new Book('Brown Bear, Brown Bear', 0));   return {  //library: libraryCollection  library: new LibraryCollection()  .addItem(new Book('Interaction Design', 200))  .addItem(new Movie('Paw Patrol!', 78))  .addItem(new Movie('Harriet', 122))  .addItem(new Book('Brown Bear, Brown Bear', 0))  }  },   template: `  lt;div class="card-columns"gt;  lt;library-item v-for="item in library" :item="item"gt;lt;/library-itemgt;  lt;div class="card"gt;  lt;pgt;Checked out: {{library.checkedOutItems().length}}lt;/pgt;  lt;/divgt;    lt;/divgt;  ` })  const LibraryItemComponent = Vue.component('LibraryItem', {  // values/bindings passed to this component  props: {  item: Object  },   computed: {  typeOfItem(){  return this.item.constructor.name;  }  },   // the view  template: `  lt;div class="card" :class="item.isAvailable() ? 'border-success' : 'border-warning'" style="border-width: 3px;"gt; lt;!-- lt;h3 class="card-title"gt;{{item.title}}lt;/h3gt;--gt; lt;!-- lt;p class="card-text" v-if="item.constructor.name == 'Book'"gt;Pages: {{item.pages}}lt;/pgt;--gt; lt;!-- lt;p class="card-text" v-if="item.runningTime"gt;Running Time: {{item.runningTime}}lt;/pgt;--gt;  lt;div class="card-body"gt;  lt;component :is="typeOfItem" :item="item"gt;lt;/componentgt;  lt;/divgt;  lt;div class="card-footer"gt;  lt;button @click="item.checkOut()" class="btn btn-secondary"gt;Check Outlt;/buttongt;  lt;button @click="item.checkIn()" class="btn btn-secondary"gt;Check Inlt;/buttongt;  lt;button @click="EventBus.$emit('addItem', item)" class="btn btn-secondary"gt;Add to Cartlt;/buttongt;  lt;button @click="item.favorite()" class="btn btn-secondary"gt;{{item.isFavorite ? 'Unfavorite' : 'Favorite'}}lt;/buttongt;  lt;/divgt;  lt;/divgt;  `, });  const BookComponent = Vue.component('Book', {  props: {  item: Book  },   template: `  lt;div class="book"gt;  lt;h3 class="card-title"gt;{{item.title}}lt;/h3gt;  lt;p class="card-text"gt;Pages: {{item.pages}}lt;/pgt;  lt;/divgt;  `, });  const MovieComponent = Vue.component('Movie', {  props: {  item: Movie  },   template: `  lt;div class="movie"gt;  lt;h3 class="card-title"gt;{{item.title}}lt;/h3gt;  lt;p class="card-text"gt;Running Time: {{item.runningTime}}lt;/pgt;  lt;/divgt;  `, });  const Cart = Vue.component('Cart', {  // this function is run AFTER the props have been passed in  data() {  // without chaining  // let libraryCollection = new LibraryCollection();  // libraryCollection.addItem(new Book('Interaction Design', 200));  // libraryCollection.addItem(new Movie('Paw Patrol!', 78));  // libraryCollection.addItem(new Movie('Harriet', 122));  // libraryCollection.addItem(new Book('Brown Bear, Brown Bear', 0));   return {  //library: libraryCollection  cart: new CartCollection()  }  },   template: `  lt;div class="card-columns"gt;  lt;cart-item v-for="item in cart" :item="item"gt;lt;/cart-itemgt;  lt;div class="card"gt;  lt;pgt;Items in cart: {{cart.length}}lt;/pgt;  lt;/divgt;    lt;/divgt;  ` })  

Это мое app.models.js файл

 function LibraryCollection(){  this.__proto__ = []; // as of ES6 (2015)   this.addItem = function(item){  this.push(new LibraryItem(item));   // allows us to chain methods  return this;  }   this.checkedOutItems = function(){  return this.filter(function(item){  return !item.isAvailable();  })  } } // current and pre-ES6 LibraryCollection.prototype = []; LibraryCollection.prototype.constructor = LibraryCollection;  // let divs = $('div'); // divs.hide().show().html('asdf'); function LibraryItem(media){  // list of possible values (enum)  const STATUSES = {CHECKED_OUT: 'out', CHECKED_IN: 'in', LOST: 'lost'}   // decorating/adding functionality to an existing object  media.status = STATUSES.CHECKED_IN;  media.isFavorite = false;   // methods  media.checkIn = function(){  this.status = STATUSES.CHECKED_IN;  }   media.checkOut = function(){  this.status = STATUSES.CHECKED_OUT;  }   media.isAvailable = function(){  return this.status === STATUSES.CHECKED_IN;  }   media.favorite = function() {  this.isFavorite = !this.isFavorite;  return this.favorite;  }   return media; } function CartCollection(){  this.__proto__ = []; // as of ES6 (2015)   this.addItem = function(item){  this.push(item);  console.log(this);   // allows us to chain methods  return this;  }  this.removeItem = function(libraryItem){  let index = this.indexOf(libraryItem);  this.splice(index,1);  } } // current and pre-ES6 CartCollection.prototype = []; CartCollection.prototype.constructor = CartCollection;