Question

我对Vue.js非常陌生。我正在尝试构建一个汇总项目列表的简单应用。但是，它也应具有“禁用”单个项目的选项，以使它们的价值不对总价值有贡献。（更新：按钮应切换为禁用状态）

从外观上看，禁用项将变成灰色，（我不希望其数量显示为零）

我想象中的是，以具有禁用属性的父项作为目标（单击btn时）。然后…。当总计完成后，将检查此属性的存在（并且将跳过所有没有该属性的项目（类？）

但是我不知道这在Vue World中如何工作。有人愿意帮忙吗？甚至为我指明正确的方向？

HTML

<div id="app">
    <div id="item1">{{ item1.amt }} <button type="button">exclude me</button></div>
    <div id="item2">{{ item2.amt }} <button type="button">exclude me</button></div>
    <div id="item3">{{ item3.amt }} <button type="button">exclude me</button></div>

    <br>

    <div id="total">total: {{ item1.amt + item2.amt + item3.amt }}</div>

</div>

JS

var app = new Vue({
    el: "#app", 
    data: {
        item1: {
            amt: 10
        },
        item2: {
            amt: 20
        },
        item3: {
            amt: 30
        }
    }
});

https://codepen.io/dagford/pen/oyKXYP?editors=1010

谢谢

Answer 1

欢迎来到Vue的美好世界。

如果您需要来查看工作代码，请转到here

但是让我向您解释我的实际情况

JS

var app = new Vue({
    el: "#app", 
    data: {
        items:[
        {
            id:'item1',
            included:'true',
            amt: 10
        },
        {
            id:'item2',
            included:'true',
            amt: 20
        },
        {
            id:'item3',
            included:'true',
            amt: 30
        }
        ]
    },
    computed:{
        itemTotal(){
            return this.items.reduce(function(sum, item){
                if(item.included){
                    return  item.amt + sum;
                }

                return sum;
            },0)
        }
    }
});

以正确的方式对数据建模非常关键。由于您的商品具有共同的属性，因此可以放入数组中。我已经包含了id和一个标志，知道它是否包含在内。

我还添加了一种方法，用于在每次更改项目时计算总数。

模板：

<div id="app">    
    <div v-for="item in items"
         :id="item.id"
         :key="item.id">
        <span>{{item.amt}}</span>
        <button @click="item.included = false"> exclude me</button>

    </div>
    <br>
    <div id="total">total: {{ itemTotal }}</div>
    </div>

在模板代码中，我添加了v-for来呈现整个列表，单击按钮时，我只是在更改标志（包括）。由vue自动聪明地触发itemTotal的计算。最后，我在单独的div中渲染了itemTotal。

我希望这会有所帮助。

Answer 2

如果您想通过按钮来切换“包含”状态并排除该值

尝试使用v-on:click和unclick boolean varible

简单的演示如下：

var app = new Vue({
    el: "#app", 
    data: {
        item1: {
            amt: 10,
            unclick:true
        },
        item2: {
            amt: 30,
            unclick:true
        }
    }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div id="app">
    <div id="item1">{{ item1.amt }} 
        <button v-on:click="item1.unclick = !item1.unclick" type="button">
         {{ (item1.unclick?'exclude me':'include me')  }}
        </button>  
    </div>
    <div id="item2">{{ item2.amt }} 
        <button v-on:click="item2.unclick = !item2.unclick" type="button">
         {{ (item2.unclick?'exclude me':'include me')  }}
        </button>  
    </div>
    <br>
    <div id="total">total: {{ 
            (item1.unclick?item1.amt:0) 
            + (item2.unclick?item2.amt:0)
        }}
    </div>
</div>

一个简单的Vue.js加法应用

2 个答案: