#vue.js
#vue.js
Вопрос:
Я новичок в vuejs и пытаюсь реализовать корзину покупок на javascript, поэтому у меня есть этот метод, на выходе получается html-таблица с некоторыми действиями v-on: click, которые не работают, что не так
<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());
}
},
Комментарии:
1. Вы не должны пытаться вставить html с помощью jquery в vue, вы должны использовать либо vue, либо jquery, на самом деле нет причин для обоих; все это, вероятно, должно быть преобразовано в компоненты Vue и отображено с использованием состояния vue
2. содержимое v-html «интерпретируется как обычный HTML — привязки данных игнорируются».
3. Я добавил сотрудников jquery в комментарии, что мне делать с v-html. Как я могу добавить html?
4. это так неправильно… Сначала вы должны пойти и прочитать документацию …
5. использование v-html устраняет функции привязки данных в этих элементах. Мне действительно любопытно, почему вы должны писать vue таким образом, вместо того, чтобы писать шаблон непосредственно там, где он должен быть
Ответ №1:
Я создаю этот код для своей корзины покупок
<div id="vue_det">
<div id="products">
<p>
Orange,pricε:20 <a href="#" v-on:click = "addItemToCart('orange',20,1)">Add</a>
</p>
<p>
Paok,pricε:22 <a href="#" v-on:click = "addItemToCart('paok',22,1)">Add</a>
</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>