PhTitle.vue

<template>
  <v-container>
    <v-form lazy-validation ref="form" v-model="valid">
      <v-layout row wrap fill-height>
        <v-flex xs8>
          <v-text-field
            :value="title"
          
            :label="checkAsterix($t('bf:Title'))"
            :required="required"
            :rules="required ? [ v => !!v || 'Required'] : [ 'This field is not required']"
            v-on:input="$emit('input-title', $event), processTitle(), validate(), $emit('title-validation', validationWarning)"
            background-color="blue-grey lighten-5"
            box
          >
            <template v-slot:prepend-inner>
              <v-tooltip bottom>
                <template v-slot:activator="{ on }">
                  <v-icon color="blue" v-on="on">info</v-icon>
                </template>
                {{info}}
              </v-tooltip>
            </template>
              
          </v-text-field>
        </v-flex>
      </v-layout>
    </v-form>
  </v-container>
</template>

<script>
import "@/compiled-icons/material-content-add";
import "@/compiled-icons/material-content-remove";
import "@/compiled-icons/material-hardware-arrow-down";
import "@/compiled-icons/material-hardware-arrow-up";

export default {
  name: "ph-title",
  computed: {
    vocabularies: function() {
      return this.$store.state.vocabulary.vocabularies;
    },
    userLanguage: function() {
      return this.$i18n.locale;
    }
  },
  props: {
    title: {
      type: String
    },
    required: {
      type: Boolean,
      default: false
    },
    formValidation: {
      type: Boolean,
      default: true
    },
    info: {
      type: String
    }
  },
  methods: {
    checkAsterix: function(label) {
      if (this.required) {
        return label + "*";
      } else {
        return label;
      }
    },

    processTitle: function() {
      this.$store.commit("changeContainer", this.title);
    },
    validate: function() {
      if (this.formValidation) {
        if (this.$refs.form.validate()) {
          this.validationWarning = false;
        } else {
          this.validationWarning = true;
        }
      } else {
        this.validationWarning = false;
      }
    }
  },
  data() {
    return {
      valid: false,
      validationWarning: false
    };
  }
};
</script>

<style scoped>
.v-btn {
  margin: 0;
}
</style>