반응형
값(vuej)을 전달하시겠습니까?
인detail.vue
:
data() {
return {
columns: [
{
label: "name",
field: "name",
},
{
label: "status",
field: "status",
},
row: [],
};
},
// call Api
created() {
axios
.get("/detail")
.then((res) => {
this.rows = res.data;
})
.catch((error) => {
console.log(error);
});
},
methods: {
detailFilter: function (name, status) {
console.log(name, status)
},
},
템플릿:
<filter-list
v-on:detail-filter="detailFilter"
/>
인Filter.vue
data() {
return {
name: '',
status: '',
options: [
{ label: 'Success', value: 'pending' },
{ label: 'Fail', value: 'active' },
],
};
},
methods: {
changeDetailFilter: function () {
this.$emit(
"detail-filter",
this.name,
this.status,
);
localStorage.setItem('name', this.name);
localStorage.setItem('status', JSON.stringify(this.status))
},
템플릿:
<b-col md="3">
<b-form-group>
<label>Name:</label>
<b-form-input
type="text"
v-model="name"
v-on:change="changeDetailFilter()"
/>
</b-form-group>
</b-col>
<b-col md="3">
<label>status:</label>
<v-select
:options="options"
v-model="status"
@input="changeDetailFilter()"
/>
</b-col>
지금 확인하고 싶다created ()
와 함께name
그리고.status
다음 예시와 같이 매개 변수를 전달합니다.
created() {
axios
.get("/detail",{
params: {
name: name,
status: status
},
})
.then((res) => {
this.rows = res.data;
})
.catch((error) => {
console.log(error);
});
},
이름과 상태를 얻을 수 있는 방법이 있습니까?created()
localStorage.getItem('name')을 사용하여 아이디어를 제시합니다.고마워요.
@좋을지도 몰라.
created() {
let name = localStorage.getItem('name')
let status = localStorage.getItem('status')
// or if what you're fetching from localStorage is
// an Object,
// let someObject = JSON.parse(localStorage.getItem('someObject')).
// then name could be someObject.name and status someObject.status
axios
.get("/detail",{
params: {
name: name,
status: status
},
})
.then((res) => {
this.rows = res.data;
})
.catch((error) => {
console.log(error);
});
},
언급URL : https://stackoverflow.com/questions/68310163/pass-value-in-vuejs
반응형
'source' 카테고리의 다른 글
스위치에서 null을 사용하는 방법 (0) | 2022.08.16 |
---|---|
Java에서 Base64로 인코딩 (0) | 2022.08.16 |
Java 8: 여러 단위의 2개의 LocalDateTime 차이 (0) | 2022.08.16 |
Vuex가 정의되지 않은 속성을 읽을 수 없음 (0) | 2022.08.16 |
vuex-store에서 vue child-component를 업데이트하려면 어떻게 해야 합니까? (0) | 2022.08.16 |