<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- <script src="js/jquery-1.7.2.min.js"></script> -->
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/lodash.min.js"></script>
<style type="">
.on{
background: #ccc
}
ul li {
list-style: none;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
Vue.component('change',{
template:"#change",
props:{
name:Array,
Data:Array,
citydata:Array,
item:Object
},
data:function(){
return{
onname:'第一',
show:false,
updatecity:"",
updatename:'',
nowEditCol:'',
citydataone:"",
oncity:['北京'],
citydataone:[],
onecity:[]
}
},
computed:{
on:function(item){
console.log(item)
}
},
methods:{
toggle:function(item,index){
// console.log(item.name)
this.onname = item.name
},
deleteCustomer: function(index,name){
this.citydataone = _.find(this.citydata,function(data){
return data.name==name.name
})
var name =citydataone.name
var city = citydataone.city
// console.log(name)
console.log(this.citydata)
city.splice(index, 1)
},
openupdateCustomer: function(item,index){
// this.updatecity=items
//
this.updatename=item.name
this.nowEditCol=index
},
updateCustomer: function(item,index){
// console.log(this.oncity)
this.citydataone = _.find(this.citydata,function(data){
return data.name==item.name
})
// console.log(this.citydataone)
this.onecity =this.citydataone.city
// this.citydataone.city[this.nowEditCol]=this.oncity
// demo.onecity.$set(this.nowEditCol,this.oncity)
// // demo.$set()
// console.log(this.citydataone.city[this.nowEditCol])
this.onecity.$set(index,this.oncity);
console.log(this.oncity)
this.nowEditCol=-1
}
}
})
var demo =new Vue({
el:".main",
data:{
changeData:[
{ name: '第一', con: "第一内容" },
{ name: '第二', con: "第二内容" },
{ name: '第三', con: "第二内容" }
],
gridData: [],
item: ['aa'],
},
ready: function() {
this.getCustomers()
},
methods: {
getCustomers: function() {
this.$http.get('push.json')
.then((response) => {
this.$set('gridData', response.data.data)
// console.log(response.data.data)
})
.catch(function(response) {
console.log( response.data)
})
},
createCustomer: function(item) {
this.gridData.push({name:item,city:[1,2,3]})
},
updateCustomer2: function(item,index){
// console.log(this.oncity)
// this.citydataone = _.find(this.citydata,function(data){
// return data.name==item.name
// })
// var onecity =this.citydataone.city
// this.citydataone.city[this.nowEditCol]=this.oncity
// demo.onecity.$set(this.nowEditCol,this.oncity)
// // demo.$set()
// console.log(this.citydataone.city[this.nowEditCol])
this.studyArr.$set(index,this.editArr);
}
},
})
}
</script>
<script type="text/x-template" id="change">
<div >
<ul>
<li
v-for="top in Data"
@click="toggle(top,$index)"
:class="{'on':onname == top.name}"
>
{{top.name}}
</li>
</ul>
<div v-for="top in Data" v-if="top.name==onname">
{{top.con}}
</div>
<div v-for="name in citydata">
{{name.name}}
<ul >
<li v-for="city in name.city" track-by="$index"> {{city}}
<span @click="deleteCustomer($index,name)">删除</span>
<span @click="openupdateCustomer(name,$index)">修改</span>
<div v-if="$index==this.nowEditCol && updatename==name.name" >
<input type="text"
value={{city}}
v-model="oncity"
>
<input
type="button"
value="确定"
@click="updateCustomer(name,$index)"
>
</div>
</li>
</ul>
</div>
<div>
</div>
</script>
</head>
<body>
<div class="main" >
<change
:data="changeData"
:citydata="gridData"
>
</change>
<form>
<input type="text" v-model="item">
<div
@click="createCustomer(item)">确定</div>
</form>
<p>{{item}}</p>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- <script src="js/jquery-1.7.2.min.js"></script> -->
<script src="js/vue.js"></script>
<script src="js/vue-resource.js"></script>
<script src="js/lodash.min.js"></script>
<style type="">
.on{
background: #ccc
}
ul li {
list-style: none;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
Vue.component('change',{
template:"#change",
props:{
name:Array,
Data:Array,
citydata:Array,
item:Object
},
data:function(){
return{
onname:'第一',
show:false,
updatecity:"",
updatename:'',
nowEditCol:'',
citydataone:"",
oncity:['北京'],
citydataone:[],
onecity:[]
}
},
computed:{
on:function(item){
console.log(item)
}
},
methods:{
toggle:function(item,index){
// console.log(item.name)
this.onname = item.name
},
deleteCustomer: function(index,name){
this.citydataone = _.find(this.citydata,function(data){
return data.name==name.name
})
var name =citydataone.name
var city = citydataone.city
// console.log(name)
console.log(this.citydata)
city.splice(index, 1)
},
openupdateCustomer: function(item,index){
// this.updatecity=items
//
this.updatename=item.name
this.nowEditCol=index
},
updateCustomer: function(item,index){
// console.log(this.oncity)
this.citydataone = _.find(this.citydata,function(data){
return data.name==item.name
})
// console.log(this.citydataone)
this.onecity =this.citydataone.city
// this.citydataone.city[this.nowEditCol]=this.oncity
// demo.onecity.$set(this.nowEditCol,this.oncity)
// // demo.$set()
// console.log(this.citydataone.city[this.nowEditCol])
this.onecity.$set(index,this.oncity);
console.log(this.oncity)
this.nowEditCol=-1
}
}
})
var demo =new Vue({
el:".main",
data:{
changeData:[
{ name: '第一', con: "第一内容" },
{ name: '第二', con: "第二内容" },
{ name: '第三', con: "第二内容" }
],
gridData: [],
item: ['aa'],
},
ready: function() {
this.getCustomers()
},
methods: {
getCustomers: function() {
this.$http.get('push.json')
.then((response) => {
this.$set('gridData', response.data.data)
// console.log(response.data.data)
})
.catch(function(response) {
console.log( response.data)
})
},
createCustomer: function(item) {
this.gridData.push({name:item,city:[1,2,3]})
},
updateCustomer2: function(item,index){
// console.log(this.oncity)
// this.citydataone = _.find(this.citydata,function(data){
// return data.name==item.name
// })
// var onecity =this.citydataone.city
// this.citydataone.city[this.nowEditCol]=this.oncity
// demo.onecity.$set(this.nowEditCol,this.oncity)
// // demo.$set()
// console.log(this.citydataone.city[this.nowEditCol])
this.studyArr.$set(index,this.editArr);
}
},
})
}
</script>
<script type="text/x-template" id="change">
<div >
<ul>
<li
v-for="top in Data"
@click="toggle(top,$index)"
:class="{'on':onname == top.name}"
>
{{top.name}}
</li>
</ul>
<div v-for="top in Data" v-if="top.name==onname">
{{top.con}}
</div>
<div v-for="name in citydata">
{{name.name}}
<ul >
<li v-for="city in name.city" track-by="$index"> {{city}}
<span @click="deleteCustomer($index,name)">删除</span>
<span @click="openupdateCustomer(name,$index)">修改</span>
<div v-if="$index==this.nowEditCol && updatename==name.name" >
<input type="text"
value={{city}}
v-model="oncity"
>
<input
type="button"
value="确定"
@click="updateCustomer(name,$index)"
>
</div>
</li>
</ul>
</div>
<div>
</div>
</script>
</head>
<body>
<div class="main" >
<change
:data="changeData"
:citydata="gridData"
>
</change>
<form>
<input type="text" v-model="item">
<div
@click="createCustomer(item)">确定</div>
</form>
<p>{{item}}</p>
</div>
</body>
</html>