vue v-on:click problem,actions do not work - vue.js

Question

I am new to vuejs and I am trying to implement a javascript shopping cart,so I have this method,the output is a html table with some v-on:click actions that do not work,what is wrong
<div v-html="str"></div>
<div v-html="total"></div>
<div v-html="count"></div>
var vm = new Vue({
el: '#vue_det',
data: {
str:"",
total:0,
count:0
},
methods: {
displaycart: function ()
{
var cartArray = shoppingCart.listCart();
var output = "<table>";
for (var i in cartArray) {
output += "<tr>"
+ "<td>" + cartArray[i].name + "</td>"
+ "<td>(" + cartArray[i].price + ")</td>"
+ "<td><div class='input-group'><button v-on:click=minusitem('" + cartArray[i].name + "') class='minus-item input-group-addon btn btn-primary' >-</button>"
+ "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
+ "<button v-on:click=plusitem('" + cartArray[i].name + "') class='plus-item btn btn-primary input-group-addon' >+</button></div></td>"
+ "<td><button v-on:click=deleteitem('" + cartArray[i].name + "') class='delete-item btn btn-danger' >X</button></td>"
+ "<td>" + cartArray[i].total + "</td>"
+ "</tr>";
}
output +="</table>";
this.str=output;
this.total=shoppingCart.totalCart()
this.count=shoppingCart.totalCount()
// $('.show-cart').html(output);
// $('.total-cart').html(shoppingCart.totalCart());
// $('.total-count').html(shoppingCart.totalCount());
}
},

Answer 1

I make this code for my shopping cart
<div id="vue_det">
<div id="products">
<p>
Orange,pricε:20 Add
</p>
<p>
Paok,pricε:22 Add
</p>
</div>
<div v-for="entry in listCart()" class="entry">{{ entry.name }}
<button v-on:click=removeItemFromCart(entry.name) >-</button>
<input type='number' v-model.number="entry.count" >
<button v-on:click=addItemToCart(entry.name)>+</button>
<button v-on:click=removeItemFromCartAll(entry.name) >X</button>
{{entry.total}}
</div>
<div>Total:{{totalCart()}}</div>
<div>Totalcount:{{totalCount()}}</div>
</div>
</div>
<script type="text/javascript">
var vm = new Vue({
el: '#vue_det',
data: {
item:
{
name: "",
price: 0,
count: 0
},
cart: []
},
methods: {
addItemToCart: function (name, price, count) {
for (var item in this.cart) {
if (this.cart[item].name === name) {
this.cart[item].count++;
this.saveCart();
return;
}
}
var item = {};
item.count = count;
item.price = price;
item.name = name;
this.cart.push(item);
this.saveCart();
},
saveCart: function ()
{
sessionStorage.setItem('shoppingCart', JSON.stringify(this.cart));
return;
},
// Load cart
loadCart: function () {
this.cart = JSON.parse(sessionStorage.getItem('shoppingCart'));
},
setCountForItem : function (name, count) {
for (var i in this.cart) {
if (this.cart[i].name === name) {
this.cart[i].count = count;
this.saveCart();
break;
}
}
},
removeItemFromCart : function (name) {
for (var item in this.cart) {
if (this.cart[item].name === name) {
this.cart[item].count--;
if (this.cart[item].count === 0) {
this.cart.splice(item, 1);
}
this.saveCart();
break;
}
}
this.saveCart();
},
removeItemFromCartAll :function (name) {
for (var item in this.cart) {
if (this.cart[item].name === name) {
this.cart.splice(item, 1);
this.saveCart();
break;
}
}
//this.saveCart();
},
clearCart : function () {
cart = [];
this.saveCart();
},
totalCount : function () {
var totalCount = 0;
for (var item in this.cart) {
totalCount += this.cart[item].count;
}
return totalCount;
},
totalCart : function () {
var totalCart = 0;
for (var item in this.cart) {
totalCart += this.cart[item].price * this.cart[item].count;
}
return Number(totalCart.toFixed(2));
},
listCart : function () {
var cartCopy = [];
for (i in this.cart) {
//item =cart[i];
itemCopy = {};
for (p in this.cart[i]) {
// itemCopy[p] = this.cart[i][p];
itemCopy[p] = this.cart[i][p];
}
itemCopy.total = Number(this.cart[i].price * this.cart[i].count).toFixed(2);
cartCopy.push(itemCopy)
}
return cartCopy;
},
},
created: function () {
if (sessionStorage.getItem("shoppingCart") != null) {
this.loadCart();
}
},
})
</script>