In 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)
},
},
template :
<filter-list
v-on:detail-filter="detailFilter"
/>
In 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))
},
template:
<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>
Now I want to check created () with name and status, then pass in params for it. for example:
created() {
axios
.get("/detail",{
params: {
name: name,
status: status
},
})
.then((res) => {
this.rows = res.data;
})
.catch((error) => {
console.log(error);
});
},
Is there a way to get the name, and status passed to created(), using localStorage.getItem('name'); give me ideas.Thanks
@good perhaps something like this
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);
});
},