使用vue点击li,获取当前点击li父辈元素的属性值方法

vue实现加载并展示后台数据的tab选项卡

vue用于渲染页面

jquery用于方法实现动态效果

<div class="content">

<!-- change方法, 数值改变触发 -->
<select v-on:change="getData()" name="" id="dataSelect">
<option value="" v-bind:name="index" v-for="(value, index) in items">{{value.date}}</option>
</select>

<!-- 为name属性添加当前索引值 -->
<ul v-on:click="toFlow($event)" v-bind:name="i" class="flowData" v-for="(flow, i) in flows">
<li class="li1">
{{flow.name.fullName}}<br>
{{flow.name.time}}
</li>
<li class="li2">
{{flow.val1}}
</li>
<li class="li3">
{{flow.val2}}
</li>
<li class="li4">
{{flow.val3}}
</li>
</ul>

</div>

<script>
var vm = new Vue({
el: "#app",
data: {
user: {},
items: [],
flows: []
},
methods: {
// 根据option数值替换数据
getData: function() {
var optionIndex = $('#dataSelect option:selected').attr("name"); //选中的值
vm.flows = vm.items[optionIndex].flowsMonth;
},
toFlow: function(event) {
// 点击li获取当前li父辈ul的name属性值
var flowIndex = event.target.parentNode.getAttribute("name");
var flow = (vm.flows[flowIndex]);
$.ajax({
url: 'php/test.php',
type: 'POST',
dataType: "json",
data: {
flow: flow
},
success: function(data) {
console.log(data);
}
})
}
}
})

$(function(){
$.ajax({
url: 'json/items.json',
type: 'GET',
dataType: "json",
success: function(data) {
vm.user = data.user;
vm.items = data.flows;
// 初始数据
vm.flows = vm.items[0].flowsMonth;
}
})
})
</script>

{
"flows": [
{
"date": "2017年5月",
"flowsMonth": [
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "200",
"val2": "1.3",
"val3": "2300"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "1",
"val2": "2",
"val3": "3"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "1",
"val2": "2",
"val3": "3"
}
]
},
{
"date": "2017年6月",
"flowsMonth": [
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "200",
"val2": "1.3",
"val3": "2300"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "1",
"val2": "22",
"val3": "33"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "12",
"val2": "32",
"val3": "13"
}
]
}
,
{
"date": "2017年8月",
"flowsMonth": [
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "200",
"val2": "1.3",
"val3": "2300"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "61",
"val2": "542",
"val3": "63"
},
{
"name": {
"fullName": "xxx 10G",
"time": "当月有效"
},
"val1": "51",
"val2": "22",
"val3": "34"
}
]
}
]
}

以上这篇使用vue点击li,获取当前点击li父辈元素的属性值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

• vue2.0中click点击当前li实现动态切换class
• vue.js获得当前元素的文字信息方法