AllDepartmentsSelect.vue

AllDepartmentsSelect.vue

<template>
  <div class="form-group" :class="{ 'has-error': hasError }">
    <label class="col-md-3 control-label">Abteilung</label>
    <div class="col-md-6">
      <select id="department_id" class="form-control" v-model="departmentId" @change="setDepartment">
        <option v-for="department in departments" :value="department.id" v-text="department.department" :key="department.id"></option>
      </select>
    </div>
  </div>
</template>
<script>
import { getDepartments } from "../../api";

export default {
  computed: {
    hasError: {
      get() {
        return this.$store.state.errors.errors[this.field];
      },
    },
  },

  data() {
    return {
      departmentId: this.value,
      departments: [],
    };
  },

  mounted() {
    getDepartments().then(response => {
      this.departments = response.data;
    });
  },

  methods: {
    setDepartment: function() {
      this.$emit("input", this.departmentId);
    },
  },

  props: {
    field: {
      type: String,
      default: "department_id",
    },

    value: {
      default: 0,
    },
  },
};
</script>