daily pastebin goal
60%
SHARE
TWEET

Untitled

a guest Jan 21st, 2019 61 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <template>
  2. <div class="row">
  3.     <div class="col-7 offset-2">
  4.         <div class="row">
  5.             <div class="col-md-12 mb-3">
  6.                 <label>Summary</label>
  7.                 <textarea class="form-control" v-model="candidateInfo.summary"
  8.                           placeholder="What do you like to do?"></textarea>
  9.                 <div v-if="errors && errors.summary" class="text-danger">{{ errors.summary[0] }}</div>
  10.             </div>
  11.         </div>
  12.         <!-- ... more form fields -->
  13.         <div class="row mt-3 mb-3">
  14.             <div class="col">
  15.                 <label>Tag yourself</label>
  16.                  <span class="text-muted">Add up to six tags that categorize your skill set</span>
  17.                  <multiselect
  18.                     v-model="candidateInfo.tags"
  19.                     :options="allTags"
  20.                     :taggable="true"
  21.                     :multiple="true"></multiselect>
  22.             </div>
  23.         </div>
  24.         <div class="row">
  25.             <div class="col">
  26.                 <div class="alert alert-success" role="alert" v-if="successMessage">
  27.                     {{successMessage}}
  28.                  </div>
  29.             </div>
  30.         </div>
  31.         <div class="row mr-2 mt-2">
  32.             <div class="col">
  33.                 <button class="btn btn-success btn-lg" @click.prevent="submit()">💾 Save</button>
  34.             </div>
  35.         </div>
  36.     </div>
  37. </div>        
  38. </template>
  39. <script>
  40. import _ from 'lodash';
  41. import Multiselect from 'vue-multiselect';
  42.  
  43. export default {
  44.     props: {
  45.       'candidate': {
  46.         required: true,
  47.         default() {
  48.           return {};
  49.         }
  50.       },
  51.       'tags': {
  52.         required: true,
  53.         default() {
  54.           return '';
  55.         }
  56.       },
  57.       'candidateTags': {
  58.         required: true,
  59.         default() {
  60.           return '';
  61.         }
  62.       }
  63.     },
  64.     components: {
  65.       Multiselect
  66.     },
  67.     data() {
  68.       const candidate     = JSON.parse(this.candidate);
  69.       const allTags       = JSON.parse(this.tags);
  70.       const candidateTags = JSON.parse(this.candidateTags);
  71.      
  72.       return {
  73.         candidateInfo: {
  74.           summary: _.get(candidate, 'summary') || '',
  75.           // ... more form fields
  76.           tags: candidateTags,
  77.         },
  78.         allTags,
  79.         errors: [],
  80.         successMessage: null
  81.       };
  82.     },
  83.     methods: {
  84.       submit() {
  85.         this.successMessage = null;
  86.         this.errors = [];
  87.  
  88.         axios.put(`/candidates/${_.get(this.candidateInfo, 'id')}/edit`,  this.candidateInfo)
  89.           .then((response) => {
  90.             this.successMessage = response.data.message;
  91.           })
  92.           .catch(error => {
  93.             if (error.response.status === 422) {
  94.               this.errors = error.response.data.errors || {};
  95.             }
  96.           });
  97.       }
  98.     }
  99. }
  100. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top