VueJS Component with mutiple 2-way properties

Submitted by code_admin on Mon, 07/30/2018 - 13:32

Usage:

  1.           <JobAutocomplete
  2.             :model="showCreateJobDialogData.StateChangeSuccessJobModel"
  3.             floatlabel="Job to call when State changes to Success"
  4.             errorlabel="Error"
  5.             @modelupdate="showCreateJobDialogData.StateChangeSuccessJobModel = $event"
  6.           />
  7. ...
  8. import JobAutocomplete from '../components/JobAutocomplete'
  9. ...
  10. export default {
  11.   components: {
  12.     JobAutocomplete
  13.   },
  1. <template>
  2.   <div>
  3.     <q-input
  4.       v-model="jobName"
  5.       type="text"
  6.       :float-label="floatlabel"
  7.       :error-label="errorlabel"
  8.       :error="invalid"
  9.     />
  10.   </div>
  11. </template>
  12.  
  13. <script>
  14.  
  15. export default {
  16.   props: [
  17.     'model',
  18.     'floatlabel',
  19.     'errorlabel'
  20.   ],
  21.   data: function () {
  22.     return {
  23.     }
  24.   },
  25.   methods: {
  26.     setValue (jobNAME) {
  27.       this.$emit('modelupdate', {guid: 'TODO work out guid for job ' + jobNAME, name: jobNAME})
  28.     }
  29.   },
  30.   computed: {
  31.     jobName: {
  32.       get () {
  33.         return this.model.name
  34.       },
  35.       set (val) {
  36.         this.setValue(val)
  37.       }
  38.     },
  39.     invalid () {
  40.       return false
  41.     }
  42.   }
  43. }
  44.  
  45. </script>

Tags

RJM Article Type
Work Notes