Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Backend-Entwicklung > PHP-Tutorial > 这个vuejs的购物车demo不能显示所选下拉列表的值，请大神帮看看怎么修改？

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

WBOY
Freigeben： 2016-07-06 13:53:40
Original
1118 Leute haben es durchsucht

这个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>
Nach dem Login kopieren
Nach dem Login kopieren

回复内容：

这个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>
Nach dem Login kopieren
Nach dem Login kopieren

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

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

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

Verwandte Etiketten：
php vue.js
Quelle：php.cn
Vorheriger Artikel：php 写类的时候为什么要 用构造函数 初始化全局变量 Nächster Artikel：utf8_general_ci 大小写不敏感，那都得用utf8_general_cs ？
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Aus URL-Parametern erhaltene PHP-Arrays verhalten sich nicht wie erwartet Ich habe einen URL-Parameter, der die Kategorie-ID enthält, und ich möchte ihn als Array w...
Aus 2024-04-06 22:09:02
0
1
1428
Wo soll ich die CustomLog-Direktive in Apache platzieren? Ich verwende php:7.2-apachedocker. Ich muss das URL-Anmeldezugriffsprotokoll zur Gesundhei...
Aus 2024-04-06 22:03:59
0
1
990
Welches Format haben die Variablen im Rückgabewert? Ich bin ein PHP-Neuling. Ich habe einen Code gefunden: if($x<time()){return[false,'erro...
Aus 2024-04-06 21:55:20
0
1
778
Bei der Verwendung von opentbs zum Generieren von ODT-Dateien sind Probleme aufgetreten: Werte desselben Schlüssels werden in derselben Zeile statt in separaten Spalten angezeigt. Ich verwende eine Bibliothek namens OpenTbs, um ODT mit PHP zu erstellen. Ich verwende sie...
Aus 2024-04-06 20:18:18
0
1
483
Gruppieren Sie MySQL-Ergebnisse nach ID für die Schleife Ich habe eine Tabelle mit Flugdaten in MySQL. Ich schreibe einen PHP-Code, der Daten mithi...
Aus 2024-04-06 17:27:56
0
1
406
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage