下面的代码是一个选择年月的表单，因为月份都是1月-12月，是相同的，所以问题就是：下面代码中的vue.js代码怎么修改一下数据结构，让月份只用写一次就好。
html
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<style>
#card1 {
width: 40rem;
position: absolute;
display: none;
right: 0;
left: auto;
top: 100%;
z-index: 1000;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 1rem;
color: #373a3c;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: .25rem;
}
</style>
</head>
<body>
<div class="container spark-screen">
<fieldset class="form-group">
<label for="inputGroupText" class="col-xs-2 control-label">选择年月：</label>
<div id="inputGroup1" class="input-group">
<input id="inputGroupText" name="inputGroupText" v-model="choseninputGroup1" type="text"
class="form-control"
aria-label="Text input with dropdown button"
<div class="input-group-btn">
<button id="button1" type="button" class="btn btn-secondary dropdown-toggle"
aria-haspopup="true" aria-expanded="false">
</button>
<div class="card dropdown-menu-right" id="card1">
<div class="card-header">
选择
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
</div>
<div class="card-block">
<table id="table1" class="table table-sm table-bordered dropdown-menu-right">
<tr>
<td>90年代</td>
<td>
<ul class="year-month">
<li class="col-xs-3" v-for="first in group1">
<a class="trigger right-caret">{{first.level01}}</a>
<ul class="row dropdown-menu sub-menu">
<li class="col-xs-4" v-for="second in first.level02"><a
data-table1="{{first.level01}}{{second}}">{{second}}</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
<tr>
<td>00年代</td>
<td>
<ul class="year-month">
<li class="col-xs-3" v-for="first in group2">
<a class="trigger right-caret">{{first.level01}}</a>
<ul class="row dropdown-menu sub-menu">
<li class="col-xs-4" v-for="second in first.level02"><a
data-table1="{{first.level01}}{{second}}">{{second}}</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</fieldset>
<script src="https://cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/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.17/vue.min.js"></script>
</body>
</html>
jquery代码
<script>
$(function () {
$('#button1').click(function (e) {
var menu = $('#card1');
e.stopPropagation();
if (menu.is(":hidden")) {
menu.show();
} else {
menu.hide();
}
$('.sub-menu').hide();
});
$(".year-month>li > a.trigger").on("click", function (e) {
var current = $(this).next();
var grandparent = $(this).parents();
grandparent.find(".sub-menu:visible").not(current).hide();
current.toggle();
e.stopPropagation();
});
$(".sub-menu >li >a").on("click", function () {
var root = $(this).closest('.dropdown');
root.find('.sub-menu:visible').hide();
$('input[id=inputGroupText]').val($(this).attr("data-table1"));
$('#card1').hide();
});
$('.sub-menu').mouseleave(function () {
$(this).hide();
});
$(window).click(function () {
$("#card1").hide();
});
$("button.close").click(function () {
$(this).parents("#card1").hide();
});
$("#card1,.form-control").click(function (e) {
e.stopPropagation();
});
});
</script>vue代码
<script>
var table1 = new Vue({
el: '#table1',
data: {
menu: [{
'group': '1',
'level01': '1990年',
'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}, {
'group': '1',
'level01': '1991年',
'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}, {
'group': '1',
'level01': '1992年',
'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}, {
'group': '2',
'level01': '2000年',
'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}, {
'group': '2',
'level01': '2001年',
'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}, {
'group': '2',
'level01': '2002年',
'level02': ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
}]
},
computed: {
group1: function () {
return this.menu.filter(function (m) {
return m.group === '1'
})
},
group2: function () {
return this.menu.filter(function (m) {
return m.group === '2'
})
}
}
});
</script>是不是出了点问题，问的问题都不能显示到队列中
定义两个数组循环赋值不就好了嘛
HTML
<table id="table1" class="table table-sm table-bordered dropdown-menu-right">
<tr v-for="gene in menu">
<td>{{$key}}</td>
<td>
<ul class="year-month">
<li class="col-xs-3" v-for="year in gene">
<a class="trigger right-caret">{{year}}</a>
<ul class="row dropdown-menu sub-menu">
<li class="col-xs-4" v-for="month in months">
<a>{{month}}</a>
</li>
</ul>
</li>
</ul>
</td>
</tr>
</table>SCRIPT
var table1 = new Vue({
el: '#table1',
data: {
menu: {
'90年代': ['1990年', '1991年', '1992年'],
'00年代': ['2000年', '2001年', '2002年']
}
},
computed: {
months: function () {
var arr = [];
for (var i = 1; i <= 12; i++) {
arr.push(i + '月');
}
return arr;
}
}
});