test vue app

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse.vue

@@ -14,6 +14,3 @@
       }
    }
 </script>
-
-<style>
-</style>

src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.js

@@ -0,0 +1,34 @@
+import Vue from 'vue'
+import VueResource from 'vue-resource'
+
+Vue.use(VueResource);
+
+export default {
+  template: '#vue-usagers',
+  delimiters: ['${', '}'],
+  data () {
+      return {
+          persons_associated: []
+      };
+  },
+  http: {
+      root: 'http://localhost:8001/fr/api'
+  },
+  methods: {
+      addPerson(){
+          this.persons_associated.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
+      }
+  },
+  computed: {
+      counter() {
+          return this.persons_associated.persons.length;
+      }
+  },
+  created() {
+      this.$resource('parcours/861/show').get().then((response) => {
+          this.persons_associated = response.data
+      }, (response) => {
+          console.log('erreur', response);
+      });
+  }
+};

src/Bundle/ChillPersonBundle/Resources/public/js/components/PersonsAssociated.vue

@@ -1,88 +1,34 @@
-<template>
-    <div class="vue-component">
-        <h3>Usagers concernés</h3>
-        <dl>
-            <dt>id</dt>
-                <dd>{{ persons_associated.id }}</dd>
-            <dt>opening_date</dt>
-                <dd>{{ persons_associated.opening_date }}</dd>
-            <dt>closing_date</dt>
-                <dd>{{ persons_associated.closing_date }}</dd>
-            <dt>remark</dt>
-                <dd>{{ persons_associated.remark }}</dd>
-            <dt>closing_motive</dt>
-                <dd>{{ persons_associated.closing_motive }}</dd>
-        </dl>
-        <label>{{counter}} usagers concernés</label>
-        <table class="rounded">
-            <thead>
-                <tr>
-                    <th class="chill-orange">firstname</th>
-                    <th class="chill-orange">lastname</th>
-                    <th class="chill-orange">startdate</th>
-                    <th class="chill-orange">enddate</th>
-                    <th class="chill-orange">actions</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr v-for="person in persons_associated.persons">
-                    <td>{{ person.firstname }}</td>
-                    <td>{{ person.lastname }}</td>
-                    <td>{{ person.startdate }}</td>
-                    <td>{{ person.enddate }}</td>
-                    <td>
-                      <ul class="record_actions">
-                        <li><a class="sc-button bt-show"></a></li>
-                        <li><a class="sc-button bt-update"></a></li>
-                        <li><a class="sc-button bt-delete"></a></li>
-                      </ul>
-                    </td>
-                </tr>
-            </tbody>
-        </table>
-        <ul class="record_actions">
-            <li>
-                <button class="sc-button bt-create" @click="addPerson">Add Person</button>
-            </li>
-        </ul>
-    </div>
-</template>
+ import Vue from 'vue'
+ import VueResource from 'vue-resource'
 
-<script>
-    import Vue from 'vue'
-    import VueResource from 'vue-resource'
-
-    Vue.use(VueResource)
-
-    export default{
-        data () {
-            return {
-                persons_associated: []
-            }
-        },
-        http: {
-            root: 'http://localhost:8001/fr/api'
-        },
-        methods: {
-            addPerson(){
-                this.persons_associated.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
-            }
-        },
-        computed: {
-            counter() {
-                return this.persons_associated.persons.length
-            }
-        },
-        created() {
-            this.$resource('parcours/861/show').get().then((response) => {
-                this.persons_associated = response.data
-            }, (response) => {
-                console.log('erreur', response);
-            })
-        }
-    }
-</script>
-
-<style>
-</style>
+ Vue.use(VueResource)
 
+ export default {
+     template: '#vue-usagers',
+     delimiters: ['${', '}'],
+     data () {
+         return {
+             persons_associated: []
+         }
+     },
+     http: {
+         root: 'http://localhost:8001/fr/api'
+     },
+     methods: {
+         addPerson(){
+             this.persons_associated.persons.push({"firstname": "Lisa", "lastname": "Simpson", "startdate": "1975-09-15", "enddate": "2021-04-20" })
+         }
+     },
+     computed: {
+         counter() {
+             return this.persons_associated.persons.length
+         }
+     },
+     created() {
+         this.$resource('parcours/861/show').get().then((response) => {
+             this.persons_associated = response.data
+         }, (response) => {
+             console.log('erreur', response);
+         })
+     }
+ }

src/Bundle/ChillPersonBundle/Resources/public/js/index.js

@@ -0,0 +1,7 @@
+import Vue from 'vue'
+import App from './AccompanyingCourse.vue'
+
+new Vue({
+    el: '#app',
+    render: h => h(App)
+});