원자 설계 패턴에서 방출하여 시각 선택에서 값을 변경하는 방법

원자 설계 패턴에서 방출하여 시각 선택에서 값을 변경하는 방법

의 변화된 가치를 얻기 위해 노력하고 있다.vuetify v-select을 이용하여$emit하지만 효과가 없어나는 원자 설계 패턴(atoms(어린이 성분, 저장소와 연결되지 않는 것)과 유기체(부모 성분) 및 vuex 저장소를 적용하여 구성요소를 나누었다.나는 $emit 데이터는 괜찮다고 생각하지만 그 과정이 끝나면 아무 것도 작동하지 않아.

이것은 새로운 관리 페이지 응용프로그램을 위한 것이다.vue, vuex, vuetify,API 서버에 연결하는 원자 설계.

구성 요소들

하위 구성 요소 - 원자 폴더 내

<template>
  <v-select
    :items="list"
    :label="label"
    v-model="selected"
    item-value="id"
    item-text="name"
    return-object
    @change="changeSelected"
  ></v-select>
</template>

<script>
export default {
  props: ["list", "label", "defaultSelected"],
  data() {
    return {
      selected: this.defaultSelected
    };
  },
  methods: {
    changeSelected(newValue) {
      console.log(newValue);    // display changed new data
      this.$emit("changeSelected", newValue);
    }
  }
};
</script>

상위 구성요소 - 유기체 폴더 내

<template>
  <v-select-child
    :select-label="label"
    :select-list="list"
    :default-selected="selected"
    @change-selected="changeSelected"    // problem issue?
  >
  </v-select-child>
</template>
<script>
import { mapState } from "vuex";
export default {
  data() {
    ...
  },
  computed: {
    ...mapState({
      list: state => state.list
    })
  },
  methods: {
    changeSelected() {
      console.log("changeSelected");    // doesn't work
      this.$store.dispatch("setSelected", { payload: this.selected });
    }
  }
};
</script>

부룩스 매장

인덱스 js

export default new Vuex.Store({
  modules: {
    xxx
  },
  state: {
    list: [
      {
        name: "aaaaa",
        id: "001"
      },
      {
        name: "bbbbb",
        id: "002"
      }
    ]
  },
  getters: {},
  mutations: {},
  actions: {}
});

xxx.js

export default {
    selected: { id: "001" }
  },

  getters: {
    //
  },

  mutations: {
    updateSelected(state, payload) {
      console.log("payload");    // doesn't work
      console.log(payload);
      state.selected = payload;
      console.log(state.selected);
    }
  },

  actions: {
    setSelected({ commit }, payload) {
      console.log("Action");    // doesn't work
      commit("updateSelected", payload);
    }
  }
};

다음 시간 이후에 콘솔 로그를 인쇄하지 않음changeSelected기능을 발휘하다

문서로

구성 요소나 소품과는 달리, 이벤트 이름은 어떠한 자동 케이스 변환도 제공하지 않는다.대신, 방출된 이벤트의 이름은 해당 이벤트를 청취하는 데 사용되는 이름과 정확히 일치해야 한다.

즉, 다음과 같은 이벤트를 내보낸다면$emit('changeSelected'), 그러면 당신은 사용할 필요가 있다.@changeSelected.@change-selected효과가 없을 것이다.

 <v-select-child
    :select-label="label"
    :select-list="list"
    :default-selected="selected"
    @changeSelected="changeSelected" 
  >
</v-select-child>

아래에서 해결책을 찾았다.

아동 성분

<template>
  <v-select
    :label="label"
    :items="list"
    v-model="selected"
    item-value="id"
    item-text="name"
    return-object
  ></v-select>
</template>

<script>
export default {
  props: ["list", "label", "defaultSelected"],
  computed: {
    selected: {
      get() {
        return this.defaultSelected;
      },
      set(newVal) {
        if (this.selected !== newVal) {
          this.$emit("changeSelected", newVal);
        }
      }
    }
  }
};
</script>

상위 구성 요소

<template>
  <v-select-child
   :label="label"
   :list="list"
   :defaultSelected="selected"
   @changeSelected="changeSelected"  // fix the property using camelCase
  ></v-select-child>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    ...
  },
  computed: {
    ...mapState({
      list: state => state.list
    })
  },
  methods: {
    changeSelected(val) {   // val: changed object value
      this.$store.dispatch("setSelected", { id:val.id });
    }
  }
};
</script>

시계를 사용할 수도 있다.

  <v-select
    :label="label"
    :items="list"
    v-model="selected"
    item-value="id"
    item-text="name"
  ></v-select>
</template>

...
watch:{
   selected(){
      this.$emit('changeValue', this.selected.id');
   }
}
...

및 부모로부터.

<child @changeValue="id = $event" .. />

참조URL: https://stackoverflow.com/questions/56319258/how-could-i-get-changed-value-from-vuetify-select-by-emitting-in-atomic-design-p