这个vuejs的购物车demo不能显示所选下拉列表的值，请大神帮看看怎么修改？
php
vue.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>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 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>Nach dem Login kopieren
Nach dem Login kopieren
手机看这段代码真心累……
v-model="items"，这里写错了；ajax获取到数据之后，先手动添加所需属性
selected，然后再赋值给items
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
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Wie lange dauert es, um Split Fiction zu schlagen?
1 Monate vor
By DDD
R.E.P.O. Beste grafische Einstellungen
2 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Seashell Riddle -Lösung
1 Wochen vor
By DDD
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
2 Wochen vor
By 尊渡假赌尊渡假赌尊渡假赌
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
PHP 8.4 Installations- und Upgrade-Anleitung für Ubuntu und Debian
Dec 24, 2024 pm 04:42 PM
PHP 8.4 bringt mehrere neue Funktionen, Sicherheitsverbesserungen und Leistungsverbesserungen mit einer beträchtlichen Menge an veralteten und entfernten Funktionen. In dieser Anleitung wird erklärt, wie Sie PHP 8.4 installieren oder auf PHP 8.4 auf Ubuntu, Debian oder deren Derivaten aktualisieren. Obwohl es möglich ist, PHP aus dem Quellcode zu kompilieren, ist die Installation aus einem APT-Repository wie unten erläutert oft schneller und sicherer, da diese Repositorys in Zukunft die neuesten Fehlerbehebungen und Sicherheitsupdates bereitstellen.
CakePHP Datum und Uhrzeit
Sep 10, 2024 pm 05:27 PM
Um in cakephp4 mit Datum und Uhrzeit zu arbeiten, verwenden wir die verfügbare FrozenTime-Klasse.
CakePHP-Datei hochladen
Sep 10, 2024 pm 05:27 PM
Um am Datei-Upload zu arbeiten, verwenden wir den Formular-Helfer. Hier ist ein Beispiel für den Datei-Upload.
CakePHP-Routing
Sep 10, 2024 pm 05:25 PM
In diesem Kapitel lernen wir die folgenden Themen im Zusammenhang mit dem Routing kennen.
Besprechen Sie CakePHP
Sep 10, 2024 pm 05:28 PM
CakePHP ist ein Open-Source-Framework für PHP. Es soll die Entwicklung, Bereitstellung und Wartung von Anwendungen erheblich vereinfachen. CakePHP basiert auf einer MVC-ähnlichen Architektur, die sowohl leistungsstark als auch leicht zu verstehen ist. Modelle, Ansichten und Controller gu
CakePHP arbeitet mit Datenbank
Sep 10, 2024 pm 05:25 PM
Das Arbeiten mit der Datenbank in CakePHP ist sehr einfach. In diesem Kapitel werden wir die CRUD-Operationen (Erstellen, Lesen, Aktualisieren, Löschen) verstehen.
CakePHP erstellt Validatoren
Sep 10, 2024 pm 05:26 PM
Der Validator kann durch Hinzufügen der folgenden zwei Zeilen im Controller erstellt werden.
CakePHP-Protokollierung
Sep 10, 2024 pm 05:26 PM
Die Anmeldung bei CakePHP ist eine sehr einfache Aufgabe. Sie müssen nur eine Funktion verwenden. Sie können Fehler, Ausnahmen, Benutzeraktivitäten und von Benutzern durchgeführte Aktionen für jeden Hintergrundprozess wie Cronjob protokollieren. Das Protokollieren von Daten in CakePHP ist einfach. Die Funktion log() wird bereitgestellt
