


這個(gè)vuejs的購(gòu)物車(chē)demo不能顯示所選下拉列表的值,請(qǐng)大神幫看看怎么修改?
Jul 06, 2016 pm 01:53 PM
這個(gè)vuejs的購(gòu)物車(chē)demo,在v-text="item.quantity || n "
這一行不知道怎么顯示下拉列表所選項(xiàng)的值到button的v-text中,請(qǐng)大神幫看看怎么修改?
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 "> //默認(rèn)顯示從數(shù)據(jù)庫(kù)讀取的值,但是,當(dāng)從下拉列表選擇的時(shí)候,需要顯示選擇的值,現(xiàn)在不能顯示。 </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li v-for="n in nums"> <a class="dropdown-item" n>@{{ n }}個(gè)</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>
回復(fù)內(nèi)容:
這個(gè)vuejs的購(gòu)物車(chē)demo,在v-text="item.quantity || n "
這一行不知道怎么顯示下拉列表所選項(xiàng)的值到button的v-text中,請(qǐng)大神幫看看怎么修改?
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 "> //默認(rèn)顯示從數(shù)據(jù)庫(kù)讀取的值,但是,當(dāng)從下拉列表選擇的時(shí)候,需要顯示選擇的值,現(xiàn)在不能顯示。 </button> <ul class="dropdown-menu" aria-labelledby="dropdownMenu1"> <li v-for="n in nums"> <a class="dropdown-item" n>@{{ n }}個(gè)</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>
手機(jī)看這段代碼真心累……
v-model="items"
,這里寫(xiě)錯(cuò)了;ajax獲取到數(shù)據(jù)之后,先手動(dòng)添加所需屬性
selected
,然后再賦值給items

Outils d'IA chauds

Undress AI Tool
Images de déshabillage gratuites

Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.

Clothoff.io
Dissolvant de vêtements AI

Video Face Swap
échangez les visages dans n'importe quelle vidéo sans effort grace à notre outil d'échange de visage AI entièrement gratuit?!

Article chaud

Outils chauds

Bloc-notes++7.3.1
éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

L'entrée vocale de l'utilisateur est capturée et envoyée au backend PHP via l'API MediaRecorder du JavaScript frontal; 2. PHP enregistre l'audio en tant que fichier temporaire et appelle STTAPI (tel que Google ou Baidu Voice Recognition) pour le convertir en texte; 3. PHP envoie le texte à un service d'IA (comme Openaigpt) pour obtenir une réponse intelligente; 4. PHP appelle ensuite TTSAPI (comme Baidu ou Google Voice Synthesis) pour convertir la réponse en fichier vocal; 5. PHP diffuse le fichier vocal vers l'avant pour jouer, terminant l'interaction. L'ensemble du processus est dominé par PHP pour assurer une connexion transparente entre toutes les liens.

La méthode principale de création de fonctions de partage social dans PHP est de générer dynamiquement des liens de partage qui répondent aux exigences de chaque plate-forme. 1. Obtenez d'abord la page actuelle ou les informations d'URL et d'article spécifiées; 2. Utilisez UrLencode pour coder les paramètres; 3. épisser et générer des liens de partage en fonction des protocoles de chaque plate-forme; 4. Afficher les liens sur l'avant pour que les utilisateurs puissent cliquer et partager; 5. Générez dynamiquement des balises OG sur la page pour optimiser l'affichage du contenu du partage; 6. Assurez-vous d'échapper à la saisie des utilisateurs pour empêcher les attaques XSS. Cette méthode ne nécessite pas d'authentification complexe, a de faibles co?ts de maintenance et convient à la plupart des besoins de partage de contenu.

Pour réaliser la correction d'erreur de texte et l'optimisation de la syntaxe avec l'IA, vous devez suivre les étapes suivantes: 1. Sélectionnez un modèle ou une API d'IA appropriée, tels que Baidu, Tencent API ou bibliothèque NLP open source; 2. Appelez l'API via Curl ou Guzzle de PHP et traitez les résultats de retour; 3. Afficher les informations de correction d'erreur dans l'application et permettre aux utilisateurs de choisir d'adopter l'adoption; 4. Utilisez PHP-L et PHP_CODESNIFFER pour la détection de syntaxe et l'optimisation du code; 5. Collectez en continu les commentaires et mettez à jour le modèle ou les règles pour améliorer l'effet. Lorsque vous choisissez AIAPI, concentrez-vous sur l'évaluation de la précision, de la vitesse de réponse, du prix et du support pour PHP. L'optimisation du code doit suivre les spécifications du PSR, utiliser le cache raisonnablement, éviter les requêtes circulaires, revoir le code régulièrement et utiliser x

1. La maximisation de la valeur commerciale du système de commentaires nécessite de combiner la livraison précise de la publicité native, les services à valeur ajoutée par l'utilisateur (tels que le téléchargement d'images, les commentaires de recharge), d'influencer le mécanisme d'incitation basé sur la qualité des commentaires et la conformité de la monétisation anonyme des données de données; 2. La stratégie d'audit doit adopter une combinaison de mécanismes de filtrage des mots clés dynamiques pré-audit et de signalement des utilisateurs, complétés par une note de qualité des commentaires pour réaliser une exposition hiérarchique de contenu; 3. Anti-brosses nécessite la construction d'une défense multicouche: la vérification sans capteur RecaptChav3, le robot de reconnaissance de champ de miel, IP et la limite de fréquence d'horodatage empêchent l'arrosage, et la reconnaissance du modèle de contenu marque les commentaires suspects et itéra en continu pour traiter les attaques.

PHP assure l'atomicité de la déduction des stocks via les transactions de base de données et les verrous en ligne de Forupdate pour empêcher la survente élevée élevée en simultation; 2. La cohérence de l'inventaire multiplateforme dépend de la gestion centralisée et de la synchronisation axée sur les événements, combinant des notifications API / WebHook et des files d'attente de messages pour assurer une transmission fiable de données; 3. Le mécanisme d'alarme doit définir un faible inventaire, un inventaire zéro / négatif, des ventes invidables, des cycles de réapprovisionnement et des stratégies de fluctuations anormales dans différents scénarios, et sélectionner Dingtalk, SMS ou les personnes responsables par e-mail en fonction de l'urgence, et les informations d'alarme doivent être complètes et claires pour réaliser l'adaptation et la réponse rapide.

PhpisstillRelevantinmodernerterpriseenvironments.1.modernPhp (7.xand8.x) offre des performances, des stricts, un jitcompilation, et modernsyntax, rendant la main

Le r?le principal de Homebrew dans la construction de l'environnement Mac est de simplifier l'installation et la gestion des logiciels. 1. Homebrew gère automatiquement les dépendances et encapsule les processus de compilation et d'installation complexes en commandes simples; 2. Fournit un écosystème de package logiciel unifié pour assurer la normalisation de l'emplacement et de la configuration de l'installation logicielle; 3. Intègre les fonctions de gestion des services et peut facilement démarrer et arrêter les services via BrewServices; 4. Mise à niveau et maintenance des logiciels pratiques et améliore la sécurité et les fonctionnalités du système.

Pour construire un microservice PHP flexible, vous devez utiliser RabbitMQ pour obtenir une communication asynchrone, 1. Découplez le service via des files d'attente de messages pour éviter les défaillances en cascade; 2. Configurer des files d'attente persistantes, des messages persistants, une confirmation de libération et un ACK manuel pour assurer la fiabilité; 3. Utilisez des échecs de traitement de la sécurité de la file d'attente de la file d'attente de la file d'attente de la file d'attente de la file d'attente de la file d'attente de la file d'attente de la file d'attente de la file d'attente; 4. Utilisez des outils tels que SuperVisord pour protéger les processus de consommation et permettre des mécanismes de battements cardiaques pour assurer la santé des services; et finalement réaliser la capacité du système à opérer en continu en échecs.
