[vue]ブラウズ画面、保存画面
<template>
<div>
<select v-model="selectedCity">
<option :value="city.code" :key="i" v-for="(city, i) in cityList">{{ city.name }}</option>
</select>
<input type="text" v-model="userNMame" @keyup.enter="searchUserList" />
<button type="button" @click="searchUserList">조회</button>
</div>
<div>
<table>
<thead>
<tr>
<th>이름</th>
<th>나이</th>
<th>직업</th>
</tr>
</thead>
</table>
<tbody>
<tr :key="i" v-for="(person, i) in userList">
<td>{{ person.name }}</td>
<td>{{ person.age }}</td>
<td>{{ person.job }}</td>
</tr>
</tbody>
</div>
</template>
<script>
export default {
name: "",
components: {},
data() {
return {
cityList: [
{ name: "서울", code: "02" },
{ name: "부산", code: "21" },
{ name: "제주", code: "064" },
],
selectedCity: "21",
userNMame: "",
userList: [],
};
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {
searchUserList() {
//const selectedCity = this.selectedCity;
//const userName = this.userName;
const params = {
selectedCity: this.selectedCity,
userNMame: this.userNMame,
};
this.userList = this.getUserList(params);
},
getUserList(params) {
console.log(params);
let list = [
{ name: "민규", age: 2, job: "developer" },
{ name: "영수", age: 23, job: "deㅇㅇㅇveloper" },
{ name: "감수", age: 52, job: "developㅇㅇer" },
{ name: "민두", age: 32, job: "developeㅇㅇr" },
];
return list;
},
},
};
</script>
><template>
<input type="text" v-model="userInfo.name" />
<input type="text" v-model.number="userInfo.age" />
<input type="text" v-model="userInfo.job" />
<button type="button" @click="saveUserInfo">클릭</button>
</template>
<script>
export default {
name: "",
components: {},
data() {
return {
// name: "",
// age: 0,
// job: "",
userInfo: {
name: "",
age: 0,
job: "",
},
};
},
setup() {},
created() {},
mounted() {},
unmounted() {},
methods: {
saveUserInfo() {
if (this.userInfo.name == "") {
return alert("이름을 입력해주세여");
}
if (this.userInfo.age == 0 || this.userInfo.age == "") {
return alert("나이를 입력해주세용");
}
// const params = {
// name: this.name,
// age: this.age,
// job: this.job,
// };
const r = this.saveData(this.userInfo);
if (r == "s") {
alert("사용자 정보 생성");
}
},
saveData(userInfo) {
console.log(userInfo);
const r = "s";
return r;
},
},
};
</script>
Reference
この問題について([vue]ブラウズ画面、保存画面), 我々は、より多くの情報をここで見つけました https://velog.io/@7p3m1k/vue-조회화면テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol