Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <template>
- <div class="row">
- <div class="col-7 offset-2">
- <div class="row">
- <div class="col-md-12 mb-3">
- <label>Summary</label>
- <textarea class="form-control" v-model="candidateInfo.summary"
- placeholder="What do you like to do?"></textarea>
- <div v-if="errors && errors.summary" class="text-danger">{{ errors.summary[0] }}</div>
- </div>
- </div>
- <!-- ... more form fields -->
- <div class="row mt-3 mb-3">
- <div class="col">
- <label>Tag yourself</label>
- <span class="text-muted">Add up to six tags that categorize your skill set</span>
- <multiselect
- v-model="candidateInfo.tags"
- :options="allTags"
- :taggable="true"
- :multiple="true"></multiselect>
- </div>
- </div>
- <div class="row">
- <div class="col">
- <div class="alert alert-success" role="alert" v-if="successMessage">
- {{successMessage}}
- </div>
- </div>
- </div>
- <div class="row mr-2 mt-2">
- <div class="col">
- <button class="btn btn-success btn-lg" @click.prevent="submit()">💾 Save</button>
- </div>
- </div>
- </div>
- </div>
- </template>
- <script>
- import _ from 'lodash';
- import Multiselect from 'vue-multiselect';
- export default {
- props: {
- 'candidate': {
- required: true,
- default() {
- return {};
- }
- },
- 'tags': {
- required: true,
- default() {
- return '';
- }
- },
- 'candidateTags': {
- required: true,
- default() {
- return '';
- }
- }
- },
- components: {
- Multiselect
- },
- data() {
- const candidate = JSON.parse(this.candidate);
- const allTags = JSON.parse(this.tags);
- const candidateTags = JSON.parse(this.candidateTags);
- return {
- candidateInfo: {
- summary: _.get(candidate, 'summary') || '',
- // ... more form fields
- tags: candidateTags,
- },
- allTags,
- errors: [],
- successMessage: null
- };
- },
- methods: {
- submit() {
- this.successMessage = null;
- this.errors = [];
- axios.put(`/candidates/${_.get(this.candidateInfo, 'id')}/edit`, this.candidateInfo)
- .then((response) => {
- this.successMessage = response.data.message;
- })
- .catch(error => {
- if (error.response.status === 422) {
- this.errors = error.response.data.errors || {};
- }
- });
- }
- }
- }
- </script>
Add Comment
Please, Sign In to add comment