这个vuejs的购物车demo不能显示所选下拉列表的值，请大神帮看看怎么修改？-php教程-PHP中文网

首页

后端开发

php教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 06, 2016 pm 01:53 PM

phpvue.js

这个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 id="Cart">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 id="Cart">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>

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

v-model="items"，这里写错了；
ajax获取到数据之后，先手动添加所需属性selected，然后再赋值给items

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

如何使PHP应用程序更快May 12, 2025 am 12:12 AM

tomakephpapplicationsfaster，关注台词：1）useopcodeCachingLikeLikeLikeLikeLikePachetoStorePreciledScompiledScriptbyTecode.2）MinimimiedAtabaseSqueriSegrieSqueriSegeriSybysequeryCachingandeffeftExting.3）Leveragephp7 leveragephp7 leveragephp7 leveragephpphp7功能forbettercodeefficy.4）

PHP性能优化清单：立即提高速度May 12, 2025 am 12:07 AM

到ImprovephPapplicationspeed，关注台词：1）启用opcodeCachingwithapCutoredUcescriptexecutiontime.2）实现databasequerycachingusingpdotominiminimizedatabasehits.3）usehttp/2tomultiplexrequlexrequestsandredececonnection.4 limitsclection.4.4

PHP依赖注入：提高代码可检验性May 12, 2025 am 12:03 AM

依赖注入（DI）通过显式传递依赖关系，显着提升了PHP代码的可测试性。 1）DI解耦类与具体实现，使测试和维护更灵活。 2）三种类型中，构造函数注入明确表达依赖，保持状态一致。 3）使用DI容器管理复杂依赖，提升代码质量和开发效率。

PHP性能优化：数据库查询优化May 12, 2025 am 12:02 AM

databasequeryOptimizationinphpinvolVolVOLVESEVERSEVERSTRATEMIESOENHANCEPERANCE.1）SELECTONLYNLYNESSERSAYCOLUMNSTORMONTOUMTOUNSOUDSATATATATATATATATATATRANSFER.3）

简单指南：带有PHP脚本的电子邮件发送May 12, 2025 am 12:02 AM

phpisusedforsenderemailsduetoitsbuilt-inmail（）函数andsupportiveLibrariesLikePhpMailerandSwiftMailer.1）usethemail（）functionforbasicemails，butithasimails.2）butithasimimitations.2）

PHP性能：识别和修复瓶颈May 11, 2025 am 12:13 AM

PHP性能瓶颈可以通过以下步骤解决：1)使用Xdebug或Blackfire进行性能分析，找出问题所在；2)优化数据库查询并使用缓存，如APCu；3)使用array_filter等高效函数优化数组操作；4)配置OPcache进行字节码缓存；5)优化前端，如减少HTTP请求和优化图片；6)持续监控和优化性能。通过这些方法，可以显着提升PHP应用的性能。

PHP的依赖注入：快速摘要May 11, 2025 am 12:09 AM

依赖性注射（DI）InphpisadesignPatternthatManages和ReducesClassDeptions，增强量产生性，可验证性和Maintainability.itallowspasspassingDepentenciesLikEdenceSeconnectionSeconnectionStoclasseconnectionStoclasseSasasasasareTers，interitationApertatingAeseritatingEaseTestingEasingEaseTeStingEasingAndScalability。

提高PHP性能：缓存策略和技术May 11, 2025 am 12:08 AM

cachingimprovesphpermenceByStorcyResultSofComputationsorqucrouctationsorquctationsorquickretrieval，reducingServerLoadAndenHancingResponsetimes.feftectivestrategiesinclude：1）opcodecaching，whereStoresCompiledSinmememorytssinmemorytoskipcompliation; 2）datacaching datacachingsingMemccachingmcachingmcachings

See all articles