Community Learn Tools Library Leisure
search
English
Home > Backend Development > PHP Tutorial > body text

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

WBOY
Release： 2016-07-06 13:53:40
Original
1085 people have browsed it

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
Copy after login

Reply content:

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
Copy after login

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

  1. v-model="items", wrong here;

  2. After ajax obtains the data, first manually add the required attributes selected, and then assign the value to items

Related labels：
php vue.js
source：php.cn
Previous article：Why do you need to use a constructor to initialize global variables when writing a class in PHP? Next article：utf8_general_ci is not case sensitive, so you have to use utf8_general_cs?
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
Latest Articles by Author
Latest Issues
PHP arrays obtained from URL parameters do not behave as expected I have a URL parameter that contains the category ID and I want to treat it as an array li...
From 2024-04-06 22:09:02
0
1
1428
Where should I place CustomLog directive in apache I'm using php:7.2-apachedocker. I need to disable health check url login access log. Based...
From 2024-04-06 22:03:59
0
1
990
What is the format of the variables in the return value? I am a new learner of php. I found a piece of code: if($x<time()){return[false,'error']...
From 2024-04-06 21:55:20
0
1
778
Problems encountered when using opentbs to generate odt files: values ​​of the same key are displayed in the same row instead of separate columns. I'm using a library called OpenTbs to create odt using PHP, I'm using it because columns a...
From 2024-04-06 20:18:18
0
1
483
Group MySQL results by ID for looping over I have a table with flight data in mysql. I'm writing a php code that will group and displ...
From 2024-04-06 17:27:56
0
1
406
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template