这个vuejs的购物车demo不能显示所选下拉列表的值,请大神帮看看怎么修改?
这个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

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

PHP和Python各有优势,选择依据项目需求。1.PHP适合web开发,尤其快速开发和维护网站。2.Python适用于数据科学、机器学习和人工智能,语法简洁,适合初学者。

Vue.js适合中小型项目和快速迭代,React适用于大型复杂应用。1)Vue.js易于上手,适用于团队经验不足或项目规模较小的情况。2)React的生态系统更丰富,适合有高性能需求和复杂功能需求的项目。

PHP在电子商务、内容管理系统和API开发中广泛应用。1)电子商务:用于购物车功能和支付处理。2)内容管理系统:用于动态内容生成和用户管理。3)API开发:用于RESTfulAPI开发和API安全性。通过性能优化和最佳实践,PHP应用的效率和可维护性得以提升。

PHP是一种广泛应用于服务器端的脚本语言,特别适合web开发。1.PHP可以嵌入HTML,处理HTTP请求和响应,支持多种数据库。2.PHP用于生成动态网页内容,处理表单数据,访问数据库等,具有强大的社区支持和开源资源。3.PHP是解释型语言,执行过程包括词法分析、语法分析、编译和执行。4.PHP可以与MySQL结合用于用户注册系统等高级应用。5.调试PHP时,可使用error_reporting()和var_dump()等函数。6.优化PHP代码可通过缓存机制、优化数据库查询和使用内置函数。7

PHP仍然具有活力,其在现代编程领域中依然占据重要地位。1)PHP的简单易学和强大社区支持使其在Web开发中广泛应用;2)其灵活性和稳定性使其在处理Web表单、数据库操作和文件处理等方面表现出色;3)PHP不断进化和优化,适用于初学者和经验丰富的开发者。

PHP和Python各有优势,选择应基于项目需求。1.PHP适合web开发,语法简单,执行效率高。2.Python适用于数据科学和机器学习,语法简洁,库丰富。

PHP和Python各有优劣,选择取决于项目需求和个人偏好。1.PHP适合快速开发和维护大型Web应用。2.Python在数据科学和机器学习领域占据主导地位。

PHP适合web开发,特别是在快速开发和处理动态内容方面表现出色,但不擅长数据科学和企业级应用。与Python相比,PHP在web开发中更具优势,但在数据科学领域不如Python;与Java相比,PHP在企业级应用中表现较差,但在web开发中更灵活;与JavaScript相比,PHP在后端开发中更简洁,但在前端开发中不如JavaScript。
