VueJS - нажмите, чтобы активировать новую запись массива не работает - PullRequest
Новая
       7

VueJS - нажмите, чтобы активировать новую запись массива не работает

0 голосов
/ 29 мая 2018

https://codepen.io/donnieberry97/pen/GGKQRN

var demo = new Vue({
el: '#main',
data: {
services: [
  {
  name: 'Item 1',
  price: 200,
  active: true
},
{
  name: 'Item 2',
  price: 500,
  active: false
},
{
name: 'Item 3',
  price: 700,
  active: false
}
]
},
   methods: {

addItem: function() {
  var newItem= {
    name:this.name,
    price:this.price
  };
  this.services.push(newItem);
  this.name="";
  this.price="";
  toggleActive();
},

toggleActive: function(f) {
  f.active = !f.active;
},
total: function(){
  var total=0;
  this.services.forEach(function(f){
  if(f.active){
    total+=f.price;
            }
        });
return total;
}
}


});

Когда вы используете вход для добавления новой записи в массив сервисов, после щелчка по нему активный тег не применяется к новой записи.Он должен стать синим и добавить к общей цене, но работает только состояние при наведении.

Ответы [ 2 ]

0 голосов
/ 29 мая 2018

Основная проблема, с которой вы сталкиваетесь, заключается в том, что вы вызываете неопределенную функцию и не передаете параметр в функцию toggleActive.

Поскольку toggleActive является методом Vue, вынеобходимо использовать this для правильной ссылки на него и использовать функцию из вашего экземпляра Vue;как только эта проблема будет решена, вам нужно будет передать элемент, который вы хотите переключить, потому что для написания этой функции требуется параметр для обновления активного состояния.

Вот как вы можете обновитьваша addItem функция, чтобы заставить ее работать: 

addItem: function() {
  var newItem= {
    name:this.name,
    price:this.price,
    active: false,
  };
  this.services.push(newItem);
  this.name="";
  this.price="";
  this.toggleActive(this.services[this.services.length - 1]);
},

Также обратите внимание, что я добавил свойство active во время создания элемента, чтобы Vue рассматривал это как реактивное свойство.В противном случае ваш элемент будет зависать в активном состоянии (после переключения) и не может стать неактивным при нажатии.Вы можете изменить это значение на active: true во время создания (и удалить вызов, чтобы сделать его полностью активным), если все новые элементы должны быть активны при создании.Однако я этого не делал, так как хотел показать, как исправить вызов на toggleActive.

. Здесь вы можете просмотреть и обновленный Codepen , если хотите.чтобы увидеть код в полностью рабочем состоянии.

0 голосов
/ 29 мая 2018

Я изменил ваш код в методе 'addItem' и использовал вычисляемое свойство total вместо метода total, посмотрите: 

var demo = new Vue({
  el: '#main',
  data: {
    services: [
      {
      name: 'Item 1',
      price: 200,
      active: true
    },
    {
      name: 'Item 2',
      price: 500,
      active: false
    },
    {
    name: 'Item 3',
      price: 700,
      active: false
    }
    ]
  },
  computed: {
    total () {
      return this.services.reduce((last,item)=>last + parseInt(item.price) * item.active,0)
    }
  },
  methods: {
    
    addItem: function() {
      var newItem= {
        name:this.name,
        price:this.price,
        active: true
      };
      this.services.push(newItem);
      this.name="";
      this.price="";
    },
    toggleActive: function(f) {
      f.active = !f.active;
    }
  }
});
* {
  padding: 0;
  margin: 0;
}
body{
  font-family: 'Roboto', sans-serif !important;
}

h3 {
  text-align:center;
  padding: 2em 0em;
}

h5 {
  padding: 1.5em 0.5em;;
  box-sizing:border-box;
}

.container {
  width:600px;
  margin: 0 auto;

}

ul {
  list-style:none;
}
li {
  color:black;
  border:1px solid #eeeeee;
  padding:0.5em;
  border-left: 5px solid #2196F3;
  height:30px;
  line-height:30px;
  transition: 0.4s ease;
}



.active {
  background-color:#2196F3;
  color:white;
  transition: 0.3s;
  transition: 0.4s ease;
}

.active:hover {
  background-color:#2196F3;
}

li:hover {
  background-color:#82c4f8;
  transition: 0.4s ease;
  cursor:pointer;
}

span {
  float:right;
}

#main {
box-shadow: 0 19px 38px rgba(0,0,0,0.0), 0 6px 12px rgba(0,0,0,0.22)
}

.text-center {
  text-align:center;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js"></script>

       <div class="container">
  <div id="main">
<div class="header"><h3>Click the services you wish to have:</div>
          <ul>
            <li class="group-item" v-for="service in services"  v-on:click="toggleActive(service)" v-bind:class="{'active': service.active}">{{service.name}} <span>{{service.price | currency}}</span></li>
        </ul>
    <h5>Total is: {{total | currency}}</h5>
  <input type="text" v-model="name" placeholder="name">
    <input type="text" v-model="price" placeholder="price">
  <button v-on:click="addItem()">Add Item</button>
     </div>
  </div>
...