Guest User

Untitled

a guest
Jan 6th, 2019
130
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2.  
  3. <template>
  4.  
  5. <div class="container-fluid mt-4">
  6. <div class="row">
  7.  
  8. <div v-for="word in words" :key="word.id" class="col-sm-3">
  9. <div class="flip" @mouseover="mouseOver" >
  10. <div class="flashcard card justify-content-center">
  11. <!--<button style="width:30px; height:30px; margin-left:10px;" @click='toggle = !toggle' type="button"></button>-->
  12. <!--<div v-show='toggle' class="third">-->
  13. <!-- <button type="button" @click="removeElement(word.id, index)" class="btn btn-danger">Delete {{word.id}}</word></button>-->
  14. <!-- <button type="button" @click="editWord" class="btn btn-warning">Edit</button>-->
  15. <!-- <button type="button" class="btn btn-primary">Set Level</button>-->
  16.  
  17. <!-- </div>-->
  18. <!-- <div class="edit">-->
  19. <!-- <form method="POST" enctype="multipart/form-data" >-->
  20. <!-- <input type="text" v-model="word.title" >-->
  21. <!-- <input type="text" v-model="word.second_title">-->
  22. <!-- <button type="button" @click="doneEdit(word.id)" class="btn btn-primary">Submit</button>-->
  23. <!-- </form>-->
  24.  
  25.  
  26. <!-- </div>-->
  27. <div class="face front">
  28. <div class="inner">
  29. <h3>{{word.title}}</h3>
  30.  
  31. </div>
  32. </div>
  33. <div class="face back">
  34. <div class="inner">
  35. <h3>{{word.second_title}}</h3>
  36. <button type="button" @click="changeColor()" class="btn btn-success">I remember</button>
  37. </div>
  38. </div>
  39.  
  40. </div>
  41. </div>
  42. </div>
  43. </div>
  44. </div>
  45.  
  46. </template>
  47.  
  48. <script>
  49. import JQuery from 'jquery'
  50. let $ = JQuery
  51. export default {
  52. data(){
  53.  
  54. return{
  55. word: { 'title': '', 'second_title': '' , 'status': ''},
  56. toggle: false,
  57. words: []
  58. }
  59. },
  60. created(){
  61.  
  62. axios.get('./api/word')
  63. .then(response => this.words = response.data);
  64. Event.$on('taskCreated', (title,second_title) => {
  65.  
  66.  
  67. this.words.push(title);
  68. this.words.push(second_title);
  69.  
  70.  
  71. })
  72. },
  73. mounted() {
  74. console.log('Component mounted.')
  75. },
  76. directives: {
  77. focus: {
  78. inserted: function(el) {
  79. el.focus()
  80. }
  81. }
  82. },
  83. methods:{
  84. editWord(){
  85.  
  86. $(".edit").toggle();
  87. $(".inner").toggle();
  88.  
  89. },
  90. doneEdit(id){
  91. var input = this.word;
  92.  
  93. console.log(input)
  94. axios.patch('/api/word/' + id, input)
  95. .then((response) => {
  96. this.word = {'title':'' , 'second_title':'' , 'id':'', 'status':'' };
  97. console.log("Success edit");
  98. })
  99. },
  100.  
  101. removeElement(id , index){
  102.  
  103. alert('Deleted')
  104. this.words.splice(index, 1);
  105. axios.delete('./api/word/' + id)
  106. .then((response) => {
  107. console.log(response)
  108. }, (error) => {
  109. console.log('error')
  110. })
  111. },
  112.  
  113. editonDbclick(){
  114.  
  115. alert('alert')
  116. $(this).find('.third').css({ visibility: "hidden" });
  117. },
  118.  
  119. mouseOver(){
  120.  
  121. $('.card').click(function(){
  122. $(this).toggleClass('flipped');
  123. // $(this).find('.card').toggleClass('flipped');
  124. })
  125.  
  126. },
  127.  
  128. changeColor(){
  129. document.getElementsByClassName("front").style.backgroundColor = "green";
  130. }
  131. }
  132. }
  133. </script>
RAW Paste Data