Как я могу получить измененное значение из vuetify select, выбрасывая в шаблон атомного дизайна?

Question

Я пытаюсь получить измененное значение vuetify v-select используя $emit но это не работает Я разделил компоненты, применяя шаблон атомарного дизайна (атомы (дочерний компонент и не связываться с хранилищем), организмы (родительский компонент)) и хранилища 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>

Vuex магазины

index.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 функция.

Answer 1

В документе

В отличие от компонентов и реквизитов, имена событий не обеспечивают автоматического преобразования регистра. Вместо этого имя испущенного события должно точно соответствовать имени, используемому для прослушивания этого события.

Это означает, что если вы излучаете событие как $emit('changeSelected')тогда вам нужно использовать @changeSelected, @change-selected не будет работать.

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

Answer 2

Я нашел решение ниже:

дочерний компонент

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

Answer 3

Вы также можете использовать часы;

  <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" .. />