【BootstrapVue】table에서 클릭한 레코드의 값을 취득한다
2189 단어 bootstrapVueVue.jsBootstrap
소개
Vue.js + Bootstrap 테이블의 레코드 값을 얻는 방법에 대한 메모입니다.
처음의 투고가 되기 때문에, 일본어가 이상할지도 모릅니다만, 누군가의 도움이 되면 다행입니다.
하고 싶은 일
아래 이미지는 BootstrapVue의 Tables Component를 이용하여 만든 테이블입니다.
이번에는 테이블 안의 사토 켄의 레코드를 클릭했을 때 레코드의 값을 가져옵니다.
다음은 코드입니다. 조금 해설합니다.
은 Bootstrap 테이블 형식으로 데이터를 표시하는 구성 요소입니다.
:items에 소스 데이터의 배열을 건네주면, 좋게 해 줍니다. (매우 편해)
<template>
<div>
<b-table striped hover :items="items"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ age: 20, first_name: '太郎', last_name: '田中' },
{ age: 31, first_name: '健', last_name: '佐藤' },
{ age: 45, first_name: '花子', last_name: '山田' },
{ age: 60, first_name: '謙', last_name: '渡辺' }
]
}
}
}
</script>
구현
row-clicked 이벤트 청취자로 레코드의 값을 받을 수 있는 것 같습니다. 또, items에 대한 배열의 인덱스를, 임의의 2번째의 인수로서 받아들일 수 있는 것 같다.
<template>
<div>
<b-table striped hover :items="items" @row-clicked="row"></b-table> // 変更
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ age: 20, first_name: "太郎", last_name: "田中" },
{ age: 31, first_name: "健", last_name: "佐藤" },
{ age: 45, first_name: "花子", last_name: "山田" },
{ age: 60, first_name: "謙", last_name: "渡辺" }
]
};
},
methods: { //追記
row(record) {
console.log(record);
}
}
};
</script>
결과
다음은 사토 켄씨의 레코드를 클릭했을 때의 결과입니다.
Object {age: 31, first_name: "健", last_name: "佐藤"}
레코드의 값을 받을 수 있습니다.
참고
Reference
이 문제에 관하여(【BootstrapVue】table에서 클릭한 레코드의 값을 취득한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/nakainu/items/b4726b893cf26f2790ca
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
아래 이미지는 BootstrapVue의 Tables Component를 이용하여 만든 테이블입니다.
이번에는 테이블 안의 사토 켄의 레코드를 클릭했을 때 레코드의 값을 가져옵니다.
다음은 코드입니다. 조금 해설합니다.
:items에 소스 데이터의 배열을 건네주면, 좋게 해 줍니다. (매우 편해)
<template>
<div>
<b-table striped hover :items="items"></b-table>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ age: 20, first_name: '太郎', last_name: '田中' },
{ age: 31, first_name: '健', last_name: '佐藤' },
{ age: 45, first_name: '花子', last_name: '山田' },
{ age: 60, first_name: '謙', last_name: '渡辺' }
]
}
}
}
</script>
구현
row-clicked 이벤트 청취자로 레코드의 값을 받을 수 있는 것 같습니다. 또, items에 대한 배열의 인덱스를, 임의의 2번째의 인수로서 받아들일 수 있는 것 같다.
<template>
<div>
<b-table striped hover :items="items" @row-clicked="row"></b-table> // 変更
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ age: 20, first_name: "太郎", last_name: "田中" },
{ age: 31, first_name: "健", last_name: "佐藤" },
{ age: 45, first_name: "花子", last_name: "山田" },
{ age: 60, first_name: "謙", last_name: "渡辺" }
]
};
},
methods: { //追記
row(record) {
console.log(record);
}
}
};
</script>
결과
다음은 사토 켄씨의 레코드를 클릭했을 때의 결과입니다.
Object {age: 31, first_name: "健", last_name: "佐藤"}
레코드의 값을 받을 수 있습니다.
참고
<template>
<div>
<b-table striped hover :items="items" @row-clicked="row"></b-table> // 変更
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ age: 20, first_name: "太郎", last_name: "田中" },
{ age: 31, first_name: "健", last_name: "佐藤" },
{ age: 45, first_name: "花子", last_name: "山田" },
{ age: 60, first_name: "謙", last_name: "渡辺" }
]
};
},
methods: { //追記
row(record) {
console.log(record);
}
}
};
</script>
다음은 사토 켄씨의 레코드를 클릭했을 때의 결과입니다.
Object {age: 31, first_name: "健", last_name: "佐藤"}
레코드의 값을 받을 수 있습니다.
참고
Reference
이 문제에 관하여(【BootstrapVue】table에서 클릭한 레코드의 값을 취득한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakainu/items/b4726b893cf26f2790ca텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
