vuejs怎么把下拉选择的值填入要填的位置？

vuejs怎么把下拉选择的值填入要填的位置？
这是demo：https://jsfiddle.net/kanjiushi/dwg6zm50/
要达到的效果是：选择了哪一项，就把选择的那项的值替换“请选择数量”这几个字。

jsfiddle可能打不开，再贴上demo代码：

<html>
<head>
    <meta charset="utf-8">
    <link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/tether/1.3.2/css/tether.min.css" rel="stylesheet">
</head>
<body>
<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">
            请选择数量
        </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>

<script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.3.2/js/tether.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>

<script type="text/javascript">
    var amount = new Vue({
        el: '#app',
        chosenAmount: '',
        data: {
            items: [
                {message: '1'},
                {message: '2'},
                {message: '3'}
            ]
        },
        methods: {
            fillIn: function (item) {
                this.chosenAmount = item.message;
            }
        }
    });
</script>
</body>
</html>

vue.js javascript

阅读 3.1k

2 个回答

leftstick

✓ 已被采纳

让你html里绑定一个动态的文字就好了：

<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>

var amount = new Vue({
    el: '#app',
    data:{
          chosenAmount: '',
          items: [
              {message: '1'},
              {message: '2'},
              {message: '3'}
          ]
    },
    ready: function(){
        //这个初始化不能放在data里仅仅是因为bootstrap.js也会对data-toggle="dropdown"进行一些transform，那会覆盖掉初始化在data中的值。于是我们选择了生命周期的ready里，即在bootstrap处理之后再绑定初始文字
        this.chosenAmount = '请选择数量';
    },
    methods: {
        fillIn: function (item) {
            this.chosenAmount = item.message;
        }
    }
});