# 实现修改

# 思路

1. 通过点击修改按钮触发模态框，弹出模态框，
2. 修改模态框中的数据响应到页面中

# HTML

<div id="app">
       <button type="button"@click="gai(index,item)" class="btn btn-primary" data-toggle="modal" data-target="#myModal">修改</button>
       <div class="container">
		<!-- 按钮：用于打开模态框 -->
		<!-- 模态框 -->
		<div class="modal fade" id="myModal">
			<div class="modal-dialog">
				<div class="modal-content">
					<!-- 模态框头部 -->
					<div class="modal-header">
						<h4 class="modal-title">修改</h4>
						<button type="button" class="close" data-dismiss="modal">&times;</button>
					</div>
					<!-- 模态框主体 -->
					<div class="modal-body">
						<div v-show="shou">
							<input type="" v-model="form.name" name="" id="" value="" />
							<input type="" v-model="form.age" name="" id="" value="" />
							<button type="button" @click="an()">确定</button>
						</div>
					</div>
					<!-- 模态框底部 -->
					<div class="modal-footer">
						<button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
					</div>
				</div>
			</div>
		</div>
	</div>
   </div>

# js

let vm=new Vue({
       el:"#app",
       data:{
           shou:false,
           form: {
			name: '',
			age: ''
           },
           name: '',
		age: '',
		radio: '',
		checked: [],
		sao: '',
           live: '',
           index:''
       },
       methods: {
           gai(i, k) {//点击修改
			this.shou = !this.shou;
			this.form.name = k.name;
			 this.form.age = k.age;
			this.index = i;
		},
		an() {//点击修改里的确定
			this.arr[this.index].name = this.form.name;
			this.arr[this.index].age = this.form.age;
		},
       }
   })

常用