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

Я пытаюсь получить измененное значение 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.


vuetify.js vuex emit v-select atomic-design
person Doyoun    schedule 27.05.2019    source источник

Ответы (3)


arrow_upward
1
arrow_downward

В документе

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

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

 <v-select-child
    :select-label="label"
    :select-list="list"
    :default-selected="selected"
    @changeSelected="changeSelected" 
  >
</v-select-child>
person ittus    schedule 27.05.2019
comment
Большое спасибо! Однако у меня есть еще одна проблема: измененные полезные нагрузки добавляются внутрь других. payload { payload {payload { id: aaaaa } } } Есть ли идеи использовать $event с vuetify v-select без использования хранилища vuex в дочернем компоненте? Я нашел эту статью, [arm4.hatenablog.com/entry/2018/07. /02/162628], но он использует $store напрямую, но я хотел бы использовать $store в родительском компоненте. - person Doyoun; 27.05.2019

arrow_upward
1
arrow_downward

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

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

<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>
person Doyoun    schedule 28.05.2019

arrow_upward
0
arrow_downward

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

  <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" .. />
person Kubilay Cakmak    schedule 22.10.2020