社群 學習 工具庫 休閒
搜尋
繁体中文
首頁 > 後端開發 > php教程 > 这个vuejs的购物车demo不能显示所选下拉列表的值，请大神帮看看怎么修改？

这个vuejs的购物车demo不能显示所选下拉列表的值，请大神帮看看怎么修改？

WBOY
發布： 2016-07-06 13:53:40
原創
1118 人瀏覽過

这个vuejs的购物车demo,在v-text="item.quantity || n "这一行不知道怎么显示下拉列表所选项的值到button的v-text中，请大神帮看看怎么修改？

html:

<code>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/tether/1.3.2/css/tether-theme-basic.min.css" rel="stylesheet">
    <style>

    </style>


<nav class="navbar navbar-light bg-faded">
    <div class="container">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
            ☰
        </button>
        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
            <a class="navbar-brand cu_logo" href="%7B%7B%20url('/')%20%7D%7D">Laravel-cart</a>
            <ul class="nav nav-pills pull-right">
                @if (Auth::guest())
                    <li class="nav-item">
                        <a class="nav-link" href="%7B%7B%20url('/login')%20%7D%7D">login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="%7B%7B%20url('/register')%20%7D%7D">register</a>
                    </li>
                @else
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{{ Auth::user()->name }}</a>
                        <div class="dropdown-menu">
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="%7B%7B%20url('/logout')%20%7D%7D"><i class="fa fa-btn fa-sign-out"></i>logout</a>
                        </div>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="card">
        <h3 class="card-header">Cart</h3>
        <div class="card-block">
            <div id="app">
                <div class="row">
                    <div class="col-xs-2">
                        <label class="c-input c-checkbox">
                            <input type="checkbox" v-model="allSelected">Select All
                            <span class="c-indicator"></span>
                        </label>
                    </div>
                    <div class="col-xs-2">
                        Goods
                    </div>
                    <div class="col-xs-2">
                        Quantity
                    </div>
                    <div class="col-xs-2">
                        Unit Price
                    </div>
                    <div class="col-xs-2">
                        Subtotal
                    </div>
                </div>
                <form>
                    <div class="row" v-for="(index, item) in items">
                        <div class="col-xs-2">
                            <label class="c-input c-checkbox">
                                <input type="checkbox" v-model="item.selected" :value="item.id">
                                <span class="c-indicator"></span>
                            </label>
                        </div>
                        <div class="col-xs-2">
                            @{{ item.name }}
                        </div>
                        <div class="col-xs-2">
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-text="item.quantity ||  n "> //默认显示从数据库读取的值，但是，当从下拉列表选择的时候，需要显示选择的值，现在不能显示。
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li v-for="n in nums">
                                        <a class="dropdown-item" n>@{{ n }}个</a>  //下拉列表
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xs-2">
                            @{{ item.unit_price }}
                        </div>
                        <div class="col-xs-2">
                            @{{ item.unit_price * item.quantity }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3">
                            Sum
                        </div>
                        <div class="col-xs-5">
                        </div>
                        <div class="col-xs-2">
                            @{{ sum }}
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary" :disabled="sum === 0">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-resource/0.7.3/vue-resource.min.js"></script>
<script type="text/javascript">
    Vue.config.debug = true;
    var vm = new Vue({
        el: "#app",
        data: {
            items: []
        },
        ready: function () {
            this.$http.get('/api/cart').then(function (response) {
                response.data.forEach(function (item) {
                    item.selected = false;
                });
                vm.items = response.data;
            }, function (response) {
                // error callback
            });
        },
        methods: {
            fillIn: function (index, n) {
                this.items[index].num = n;
            }
        },
        computed: {
            nums: function () {
                return [1, 2, 3, 4, 5];
            },
            allSelected: {
                get: function () {
                    for (var i = 0, length = this.items.length; i < length; i++) {
                        if (this.items[i].selected === false) {
                            return false;
                        }
                    }
                    return true;
                },
                set: function (val) {
                    for (var i = 0, length = this.items.length; i < length; i++) {
                        this.items[i].selected = val;
                    }
                }
            },
            sum: function () {
                var totalAmount = 0;
                for (var i = 0, length = this.items.length; i < length; i++) {
                    var item = this.items[i];
                    if (item.selected === true) {
                        totalAmount += item.unit_price * item.quantity;
                    }
                }
                return totalAmount;
            }
        }
    });
</script>

</code>
登入後複製
登入後複製

回复内容：

这个vuejs的购物车demo,在v-text="item.quantity || n "这一行不知道怎么显示下拉列表所选项的值到button的v-text中，请大神帮看看怎么修改？

html:

<code>


    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="//cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/tether/1.3.2/css/tether-theme-basic.min.css" rel="stylesheet">
    <style>

    </style>


<nav class="navbar navbar-light bg-faded">
    <div class="container">
        <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2">
            ☰
        </button>
        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
            <a class="navbar-brand cu_logo" href="%7B%7B%20url('/')%20%7D%7D">Laravel-cart</a>
            <ul class="nav nav-pills pull-right">
                @if (Auth::guest())
                    <li class="nav-item">
                        <a class="nav-link" href="%7B%7B%20url('/login')%20%7D%7D">login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="%7B%7B%20url('/register')%20%7D%7D">register</a>
                    </li>
                @else
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">{{ Auth::user()->name }}</a>
                        <div class="dropdown-menu">
                            <div class="dropdown-divider"></div>
                            <a class="dropdown-item" href="%7B%7B%20url('/logout')%20%7D%7D"><i class="fa fa-btn fa-sign-out"></i>logout</a>
                        </div>
                    </li>
                @endif
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <div class="card">
        <h3 class="card-header">Cart</h3>
        <div class="card-block">
            <div id="app">
                <div class="row">
                    <div class="col-xs-2">
                        <label class="c-input c-checkbox">
                            <input type="checkbox" v-model="allSelected">Select All
                            <span class="c-indicator"></span>
                        </label>
                    </div>
                    <div class="col-xs-2">
                        Goods
                    </div>
                    <div class="col-xs-2">
                        Quantity
                    </div>
                    <div class="col-xs-2">
                        Unit Price
                    </div>
                    <div class="col-xs-2">
                        Subtotal
                    </div>
                </div>
                <form>
                    <div class="row" v-for="(index, item) in items">
                        <div class="col-xs-2">
                            <label class="c-input c-checkbox">
                                <input type="checkbox" v-model="item.selected" :value="item.id">
                                <span class="c-indicator"></span>
                            </label>
                        </div>
                        <div class="col-xs-2">
                            @{{ item.name }}
                        </div>
                        <div class="col-xs-2">
                            <div class="dropdown">
                                <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-text="item.quantity ||  n "> //默认显示从数据库读取的值，但是，当从下拉列表选择的时候，需要显示选择的值，现在不能显示。
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li v-for="n in nums">
                                        <a class="dropdown-item" n>@{{ n }}个</a>  //下拉列表
                                    </li>
                                </ul>
                            </div>
                        </div>
                        <div class="col-xs-2">
                            @{{ item.unit_price }}
                        </div>
                        <div class="col-xs-2">
                            @{{ item.unit_price * item.quantity }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-xs-3">
                            Sum
                        </div>
                        <div class="col-xs-5">
                        </div>
                        <div class="col-xs-2">
                            @{{ sum }}
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary" :disabled="sum === 0">Submit</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script src="//cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/tether/1.3.2/js/tether.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="//cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-resource/0.7.3/vue-resource.min.js"></script>
<script type="text/javascript">
    Vue.config.debug = true;
    var vm = new Vue({
        el: "#app",
        data: {
            items: []
        },
        ready: function () {
            this.$http.get('/api/cart').then(function (response) {
                response.data.forEach(function (item) {
                    item.selected = false;
                });
                vm.items = response.data;
            }, function (response) {
                // error callback
            });
        },
        methods: {
            fillIn: function (index, n) {
                this.items[index].num = n;
            }
        },
        computed: {
            nums: function () {
                return [1, 2, 3, 4, 5];
            },
            allSelected: {
                get: function () {
                    for (var i = 0, length = this.items.length; i < length; i++) {
                        if (this.items[i].selected === false) {
                            return false;
                        }
                    }
                    return true;
                },
                set: function (val) {
                    for (var i = 0, length = this.items.length; i < length; i++) {
                        this.items[i].selected = val;
                    }
                }
            },
            sum: function () {
                var totalAmount = 0;
                for (var i = 0, length = this.items.length; i < length; i++) {
                    var item = this.items[i];
                    if (item.selected === true) {
                        totalAmount += item.unit_price * item.quantity;
                    }
                }
                return totalAmount;
            }
        }
    });
</script>

</code>
登入後複製
登入後複製

手机看这段代码真心累……

  1. v-model="items"，这里写错了；

  2. ajax获取到数据之后，先手动添加所需属性selected，然后再赋值给items

相關標籤：
php vue.js
來源：php.cn
上一篇：php 写类的时候为什么要 用构造函数 初始化全局变量 下一篇：utf8_general_ci 大小写不敏感，那都得用utf8_general_cs ？
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
PHP數組從URL參數中取得的行為不如預期 我有一個包含類別ID的URL參數，我想將其視為一個數組，如下所示：http://example.com?cat[]=3,9,13在PHP中，我使用它從URL參數取得數組：$catI...
來自於 2024-04-06 22:09:02
0
1
1428
我應該在 apache 中哪裡放置 CustomLog 指令 我正在使用php:7.2-apachedocker。我需要禁用運行狀況檢查url登入訪問日誌。基於此鏈接，他們提到了有關修改Customlog指令的資訊。我不是關於需要更改Cust...
來自於 2024-04-06 22:03:59
0
1
990
傳回值中變數的格式是什麼？ 我是php的新學習者。我發現有一段程式碼：if($x<time()){return[false,'error'];}邏輯或變數並不重要，但我不明白[false,'error'...
來自於 2024-04-06 21:55:20
0
1
778
使用opentbs產生odt檔案時遇到的問題：相同key的值顯示在同一行而不是單獨的欄位中。 我正在使用一個名為OpenTbs的庫來使用PHP建立odt，我使用它是因為動態生成列和行。我知道如何建立行和列，但我不知道如何組織它們。讓我加入一個例子：所以首先我會將其添加到我的...
來自於 2024-04-06 20:18:18
0
1
483
依照ID對MySQL結果進行分組以便循環遍歷 我有一個表，其中有mysql中的航班資料。我正在編寫一個php程式碼，它將使用codeigniter3對資料進行分組和顯示journey_idair_idFlightDuratio...
來自於 2024-04-06 17:27:56
0
1
406
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板