Use vue to click li to get the attribute value method of the current click li parent element.

<div class="content">
	
	<!-- changemethod, The value change triggers -->
	<select v-on:change="getData()" name="" >
		<option value="" v-bind:name="index" v-for="(value, index) in items">{{}}</option>
	</select>			
 
 
	<!-- fornameAttributes add current index value -->
	<ul v-on:click="toFlow($event)" v-bind:name="i" class="flowData" v-for="(flow, i) in flows">
		<li class="li1">
			{{}}<br>
			{{}}
		</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: {
			// Replace data according to option value			getData: function() {
				var optionIndex = $('#dataSelect option:selected').attr("name"); //The selected value				 = [optionIndex].flowsMonth;
			},
			toFlow: function(event) {
				// Click li to get the name attribute value of the current parent ul				var flowIndex = ("name");
				var flow = ([flowIndex]);
				$.ajax({
					url: 'php/',
					type: 'POST',
					dataType: "json",
					data: {
						flow: flow
					},
					success: function(data) {
						(data);
					}
				})	
			}
		}
	})
 
	$(function(){
		$.ajax({
			url: 'json/',
			type: 'GET',
			dataType: "json",
			success: function(data) {
				 = ;
				 = ;
				// Initial data				 = [0].flowsMonth;
			}
		})	
	})
</script>

{
	"flows": [
		{
			"date": "May 2017",
			"flowsMonth": [
				{
					"name": {
						"fullName": "xxx 10G",
						"time": "Valid for the month"
					},
					"val1": "200",
					"val2": "1.3",
					"val3": "2300"
				},
				{
					"name": {
						"fullName": "xxx 10G",
						"time": "Valid for the month"
					},
					"val1": "1",
					"val2": "2",
					"val3": "3"
				},
				{
					"name": {
						"fullName": "xxx 10G",
						"time": "Valid for the month"
					},
					"val1": "1",
					"val2": "2",
					"val3": "3"
				}
			]
		},
		{
			"date": "June 2017",
			"flowsMonth": [
				{
					"name": {
						"fullName": "xxx 10G",
						"time": "Valid for the month"
					},
					"val1": "200",
					"val2": "1.3",
					"val3": "2300"
				},
				{
					"name": {
						"fullName": "xxx 10G",
						"time": "Valid for the month"
					},
					"val1": "1",
					"val2": "22",
					"val3": "33"
				},
				{
					"name": {
						"fullName": "xxx 10G",
						"time": "Valid for the month"
					},
					"val1": "12",
					"val2": "32",
					"val3": "13"
				}
			]
		}
		,
		{
			"date": "August 2017",
			"flowsMonth": [
				{
					"name": {
						"fullName": "xxx 10G",
						"time": "Valid for the month"
					},
					"val1": "200",
					"val2": "1.3",
					"val3": "2300"
				},
				{
					"name": {
						"fullName": "xxx 10G",
						"time": "Valid for the month"
					},
					"val1": "61",
					"val2": "542",
					"val3": "63"
				},
				{
					"name": {
						"fullName": "xxx 10G",
						"time": "Valid for the month"
					},
					"val1": "51",
					"val2": "22",
					"val3": "34"
				}
			]
		}
	]
}