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

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

vue用于渲染页面

jquery用于方法实现动态效果

{{value.date}}

• {{flow.name.fullName}}

  {{flow.name.time}}

• {{flow.val1}}

• {{flow.val2}}

• {{flow.val3}}

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;

}

})

})

{

"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父辈元素的属性值方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。