vue.js - Pass value in vuejs?

Question

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

RuNpiXelruN RuNpiXelruN · Accepted Answer · 2021-07-09T02:51:08

@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);
    });
},

vue.js - Pass value in vuejs?

1 Answers