这个vuejs的购物车demo不能显示所选下拉列表的值，请大神帮看看怎么修改？
- WBOY原创
- 2016-07-06 13:53:401079浏览
这个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>
手机看这段代码真心累……
v-model="items"，这里写错了；ajax获取到数据之后，先手动添加所需属性
selected，然后再赋值给items
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn