V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
t2doo
V2EX  ›  Vue.js

麻烦会 Vue 的兄弟帮我看看这个怎么办

  •  
  •   t2doo · 2019-04-30 11:11:03 +08:00 · 2049 次点击
    这是一个创建于 1795 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <div id="app">
    <li><input type="checkbox" v-model="total" value="1" /></li>
    <li><input type="checkbox" v-model="total" value="2" /></li>
    <li><input type="checkbox" v-model="total" value="2" /></li>
    </div>


    <script>
    var app = new Vue({
    el" '#app',
    data: {
    total: []
    }
    });
    </script>

    这样的写法是是当 value 相同的时候,它只认 1 个,也就是 total: ["1", "2"]
    要怎么样才能全部取到值呀,万分感谢
    5 条回复    2019-04-30 13:37:31 +08:00
    xlcoder166
        1
    xlcoder166  
       2019-04-30 11:18:36 +08:00   ❤️ 1
    value 必须是唯一 1, 2, 3 你把任意一个“ 2 ”改为 3 试试
    t2doo
        2
    t2doo  
    OP
       2019-04-30 11:43:42 +08:00
    @xlcoder166 我是想选中的时候计算物品价格的,得找其它方法了,谢谢啦
    xlcoder166
        3
    xlcoder166  
       2019-04-30 12:28:18 +08:00
    你原始数据应该是对象吧 提供个思路供你参考

    绑定点击然后计算输出物品总价
    randyo
        4
    randyo  
       2019-04-30 12:38:18 +08:00 via Android
    你直接把整个对象绑定吧
    cydysm
        5
    cydysm  
       2019-04-30 13:37:31 +08:00
    供参考
    命名是 Vue 的 example
    ```
    <div id="demo">
    <input type="checkbox" id="jack" value="1" v-model="checkedNames">
    <label for="jack">10</label>
    <input type="checkbox" id="john" value="2" v-model="checkedNames">
    <label for="john">10</label>
    <input type="checkbox" id="mike" value="3" v-model="checkedNames">
    <label for="mike">20</label>
    <br>
    <span>Checked names: {{ checkedNames }}</span>
    <br/>
    <span>total: {{ total }}</span>
    </div>

    <script>
    var _init = new Vue({
    el: '#demo',
    data: {
    checkedNames: [],
    price: [10,10,30],
    total: null,
    },
    watch:{
    checkedNames(newValue) {
    this.total = null;
    newValue.forEach((value,index)=>{
    this.total += this.price[index];
    })
    }
    }
    });
    <script/>
    ```
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4577 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 09:55 · PVG 17:55 · LAX 02:55 · JFK 05:55
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.