Price.vue 1.2 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546
  1. <template>
  2. <div class="card manage-card">
  3. <header class="card-header card-section">
  4. <p class="card-header-title">Pricing</p>
  5. </header>
  6. <div class="card-content card-section">
  7. <div class="field">
  8. <label class="label">Price of the course</label>
  9. <div class="control">
  10. <input
  11. :value="course.price"
  12. @input="($event) => emitCourseValue($event, 'price')"
  13. class="input is-medium"
  14. type="text"
  15. placeholder="179.99">
  16. </div>
  17. </div>
  18. <div class="field">
  19. <label class="label">Discounted Price for the course</label>
  20. <div class="control">
  21. <input
  22. :value="course.discountedPrice"
  23. @input="($event) => emitCourseValue($event, 'discountedPrice')"
  24. class="input is-medium"
  25. type="text"
  26. placeholder="9.99">
  27. </div>
  28. </div>
  29. </div>
  30. </div>
  31. </template>
  32. <script>
  33. export default {
  34. props: {
  35. course : {
  36. type : Object,
  37. required : true
  38. }
  39. },
  40. methods : {
  41. emitCourseValue(e, field){
  42. this.$emit('courseValueUpdated', {value : e.target.value, field})
  43. }
  44. }
  45. }
  46. </script>