You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -53,4 +53,45 @@ Finally, let's look at `UserDetails.twig`
53
53
```
54
54
55
55
In this page, we use `user_id` and `favorite_color` to render information
56
-
about the student.
56
+
about the student.
57
+
58
+
## Another option: Rendering with Vue
59
+
60
+
Alternatively, instead of using Twig, we can use [Vue](https://vuejs.org/) instead.
61
+
62
+
To do this, first make a Vue page in `site/vue/src/pages` (for example, `site/vue/src/pages/UserDetails.vue`):
63
+
```html
64
+
<scriptsetuplang='ts'>
65
+
import { inject } from'vue';
66
+
67
+
constuserId= inject<string>('user_id') ??'<no user provided>';
68
+
constfavoriteColor= inject<string>('favorite_color') ??'<no color provided>';
69
+
</script>
70
+
71
+
<template>
72
+
<div class="content">
73
+
{% raw %}{{ userId }}'s favorite color is {{ favoriteColor }}.{% endraw %}
74
+
</div>
75
+
</template>
76
+
```
77
+
78
+
79
+
To actually render this page, we will then need to use the `renderVue` function in our View (ex. `UserView.php`).
80
+
81
+
The first paramater of the `renderVue` takes the name of the page (the name of the `.vue` file minus the extension, in this case `UserDetails`), and the second parameter is the same as in `renderTwig`, an associative array of variables that are passed to the Vue page.
82
+
83
+
If we wanted our `UserView.php` example to render with Vue, it would have a function that might look like this:
84
+
85
+
```php
86
+
public function showUserDetails(UserModel $user) {
87
+
return $this->core->getOutput()->renderVue(
88
+
'UserDetails',
89
+
[
90
+
'user_id' => $user->getUserId(),
91
+
'favorite_color' => $user->getFavoriteColor()
92
+
]
93
+
);
94
+
}
95
+
```
96
+
97
+
To access the variables passed by the `renderVue` function in Vue, use [`inject`](https://vuejs.org/api/composition-api-dependency-injection.html#inject). The injection keys will be the same as the keys in the provided array. If the key provided to `inject` is not in the array passed to `renderVue`, it will return `undefined`.
Copy file name to clipboardExpand all lines: _docs/developer/development_instructions/index.md
+9Lines changed: 9 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -250,6 +250,15 @@ these changes.
250
250
missing the hundreds of sample student submissions present in the
251
251
full installation.
252
252
253
+
You can append the `--test_only_grading` flag to the above command to
254
+
more closely mimic the version that is on the Cypress CI.
255
+
256
+
If you only need a certain courses, you can append each course name to
257
+
the above command to only create the courses you want.
258
+
259
+
_NOTE: If you mistype a course, that course will not be created. If you
260
+
only have mistyped courses, then no courses gets created._
261
+
253
262
254
263
NOTE: This command will also have to be run twice a year on July 1st and January 1st when the test semester will change from fall to spring or vice versa.
0 commit comments