小编gs-*_*-rp的帖子

如何从计算值中对Vue.js中的v-for的值求和

我正在尝试对使用vuejs在v-for内计算的值求和,但是我认为它不起作用,因为我无法从v-for内的计算值访问值。

我需要在{{total}}中以用户身份显示总价值,即 v-model.number="totalItem(item)"

有人可以给我一些指示吗?谢谢。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>

<div id="app">

    <button v-on:click="add">ADD ROW</button>

    <p>$: {{ total }}</p>

    <ul>
        <li v-for="(item, index) in items">
            <input type="text" v-model="item.name">
            <input type="number" v-model.number="item.quantity" min="1">
            <input type="number" v-model.number="item.price" min="0.00" max="1000000000.00" step="0.01">
            <input type="number" v-model.number="totalItem(item)" readonly>
            <button v-on:click="remove(index)">X</button>
        </li>
    </ul>



    <pre>{{ items | json}}</pre>


</div>


<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="vuejs.js"></script>
</body>

</html>
Run Code Online (Sandbox Code Playgroud)

JavaScript-Vue.js

new Vue({
  el: '#app',
  data: {
    items: [{name: '', quantity: '', price: ''}]
  },
  methods: {
    add: function () …
Run Code Online (Sandbox Code Playgroud)

vuejs2

4
推荐指数
3
解决办法
9507
查看次数

标签 统计

vuejs2 ×1