My goal is to extract the name of a job department as data for a Vue component, convert it to lowercase, and then use it to dynamically render the correct image based on the department's name. The images are named after the departments.
The current code snippet looks like this:
<ul class="jobs-container">
<li
v-for="job in filteredJobs"
:key="job.absolute_url"
class="u-margin-bottom-small">
<a :href="job.absolute_url" target="_blank">
<img src="/wp-content/themes/theme/dist/images/icons/careers/engineering.svg" alt="Engineering" />
<div>
<h3 v-html="job.departments[0].name" />
<span class="position" v-html="job.title" />
</div>
<span class="location" v-html="job.offices[0].location" />
</a>
</li>
</ul>
I am trying to achieve something like this:
<ul class="jobs-container">
<li
v-for="job in filteredJobs"
:key="job.absolute_url"
class="u-margin-bottom-small">
<a :href="job.absolute_url" target="_blank">
// insert name of job department
<img src="/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name.toLowerCase() }}.svg" alt="Engineering" />
<div>
<h3 v-html="job.departments[0].name" />
<span class="position" v-html="job.title" />
</div>
<span class="location" v-html="job.offices[0].location" />
</a>
</li>
</ul>
When attempting this approach, I encounter an error message:
ERROR Failed to compile with 1 errors 4:02:34 PM
error in ./wp-content/themes/theme/assets/js/Careers. vue?vue&type=template&id=bf690b58&
Module Error (from ./node_modules/vue-loader/lib/loader s/templateLoader.js): (Emitted value instead of an instance of Error)
Errors compiling template:
src="/wp-content/themes/theme/dist/images/icons/caree rs/{{ job.departments[0].name }}.svg": Interpolation inside attributes is no longer supported. Use v-bind or the colon shorthand instead. For example, replace
<div id="{{ val }}">with<div :id="val">.30 | class="u-margin-bottom-small"> 31 | 32 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 33 | 34 |
To resolve this, I've tried using :src for the image source:
<img :src="/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name.toLowerCase() }}.svg" alt="Engineering" />
However, this leads to another error:
ERROR Failed to compile with 1 errors 4:06:01 PM
error in ./wp-content/themes/theme/assets/js/Careers. vue?vue&type=template&id=16c0d4b0&
Module Error (from ./node_modules/vue-loader/lib/loader s/templateLoader.js): (Emitted value instead of an instance of Error)
Errors compiling template:
invalid expression: Invalid regular expression flags in
/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name }}.svgRaw expression: :src="/wp-content/themes/theme/dist/images/icons/careers/{{ job.departments[0].name }}.svg"
30 | class="u-margin-bottom-small"> 31 | 32 | | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 33 | 34 |
@ ./wp-content/themes/theme/assets/js/Careers.vue?vue&type=template&id=16c0d4b0& 1:0-223 1:0-223 @ ./wp-content/themes/theme/assets/js/Careers.vue @ ./wp-content/themes/theme/assets/js/careers.js @ ./wp-content/themes/theme/assets/js/main.js @ multi ./wp-content/themes/theme/assets/js/main.js ./wp-content/themes/theme/assets/sass/base.scss
In Vue context, can someone guide me on how to properly use
job.departments[0].name.toLowerCase()<img src="/wp-content/themes/theme/dist/images/icons/careers/(INJECT IT HERE).svg" alt="Engineering" />