JSFiddle - React, Tailwind, and code Playground

by leftstick

HTML

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/1.0.24/vue.min.js"></script>
<div class='container' id="app">
    <div class="dropdown">
        <input type="hidden"  name="amount" v-model="chosenAmount" value="">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            {{ chosenAmount }}
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
            <a class="dropdown-item" v-for="item in items" v-on:click="fillIn(item)" data-salary="{{item.message}}">{{ item.message }}个</a>
        </div>
    </div>
</div>

JavaScript

var amount = new Vue({
        el: '#app',
        data: function(){
            return {
              chosenAmount: '',
              items: [
                  {message: '1'},
                  {message: '2'},
                  {message: '3'}
              ]
          };
        },
        ready: function(){
            this.chosenAmount = '请选择数量';
        },
        methods: {
            fillIn: function (item) {
                this.chosenAmount = item.message;
            }
        }
    });