This vuejs shopping cart demo cannot display the value of the selected drop-down list. Can anyone help me how to modify it?-PHP Tutorial-php.cn

Table of Contents

Home

PHP Tutorial

This vuejs shopping cart demo cannot display the value of the selected drop-down list. Can anyone help me how to modify it?

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jul 06, 2016 pm 01:53 PM

php vue.js

In this vuejs shopping cart demo, in the v-text="item.quantity || n " line, I don’t know how to display the value of the selected item in the drop-down list to the v-text of the button. Could someone help me how to modify it?

html:

<code><!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>
<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">
            &#9776;
        </button>
        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
            <a class="navbar-brand cu_logo" href="{{ url('/') }}">Laravel-cart</a>
            <ul class="nav nav-pills pull-right">
                @if (Auth::guest())
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url('/login') }}">login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url('/register') }}">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="{{ url('/logout') }}"><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" @click="fillIn(index, 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>
</body>
</html></code>

Copy after login

Reply content:

html:

<code><!DOCTYPE html>
<html lang="en">
<head>
    <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>
</head>
<body>
<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">
            &#9776;
        </button>
        <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2">
            <a class="navbar-brand cu_logo" href="{{ url('/') }}">Laravel-cart</a>
            <ul class="nav nav-pills pull-right">
                @if (Auth::guest())
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url('/login') }}">login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url('/register') }}">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="{{ url('/logout') }}"><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" @click="fillIn(index, 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>
</body>
</html></code>

Copy after login

It’s really tiring to read this code on my phone...

v-model="items", wrong here;
After ajax obtains the data, first manually add the required attributes selected, and then assign the value to items

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hello Kitty Island Adventure: How To Get Giant Seeds

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

How Long Does It Take To Beat Split Fiction?

4 weeks ago By DDD

R.E.P.O. Save File Location: Where Is It & How to Protect It?

4 weeks ago By DDD

Two Point Museum: All Exhibits And Where To Find Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7378

Java Tutorial

1628

CakePHP Tutorial

1357

Laravel Tutorial

1267

PHP Tutorial

1216

Related knowledge

CakePHP Project Configuration Sep 10, 2024 pm 05:25 PM

In this chapter, we will understand the Environment Variables, General Configuration, Database Configuration and Email Configuration in CakePHP.

PHP 8.4 Installation and Upgrade guide for Ubuntu and Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 brings several new features, security improvements, and performance improvements with healthy amounts of feature deprecations and removals. This guide explains how to install PHP 8.4 or upgrade to PHP 8.4 on Ubuntu, Debian, or their derivati

CakePHP Date and Time Sep 10, 2024 pm 05:27 PM

To work with date and time in cakephp4, we are going to make use of the available FrozenTime class.

CakePHP File upload Sep 10, 2024 pm 05:27 PM

To work on file upload we are going to use the form helper. Here, is an example for file upload.

CakePHP Routing Sep 10, 2024 pm 05:25 PM

In this chapter, we are going to learn the following topics related to routing ?

Discuss CakePHP Sep 10, 2024 pm 05:28 PM

CakePHP is an open-source framework for PHP. It is intended to make developing, deploying and maintaining applications much easier. CakePHP is based on a MVC-like architecture that is both powerful and easy to grasp. Models, Views, and Controllers gu

CakePHP Creating Validators Sep 10, 2024 pm 05:26 PM

Validator can be created by adding the following two lines in the controller.

CakePHP Working with Database Sep 10, 2024 pm 05:25 PM

Working with database in CakePHP is very easy. We will understand the CRUD (Create, Read, Update, Delete) operations in this chapter.

See all articles