VueJS - 单击以激活新的数组条目不起作用

Question

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;
}
}

});

当您使用输入将新条目添加到服务数组时，在之后单击它时，活动标记不会应用于新条目。它应该变成蓝色并添加到总价格中，但只有悬停状态有效。

Answer 1

我已经在方法'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>

Answer 2

您遇到的主要问题是您正在调用一个未定义的函数，而不是将参数传递到您的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的调用。

如果您希望看到处于完全工作状态的代码，可以在此处查看分叉和更新的代码笔。