VUE 获取数据并进行增删改混合了选项卡

来源：互联网发布：微星淘宝买好还是京东编辑：程序博客网时间：2024/06/09 22:36

<!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/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.onload=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>

0 0

VUE 获取数据 并进行增删改 混合了选项卡

VUE 获取数据并进行增删改混合了选项卡