source

값(vuej)을 전달하시겠습니까?

gigabyte 2022. 8. 16. 23:30
반응형

값(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

반응형