As I dive into the world of Vue, I find myself facing a peculiar issue with a method that should return a string to be displayed within a <span>. While I can successfully retrieve the correct value through console.log, it seems to evade passing into the span tag.
window.onload = function () {
var app2 = new Vue({
delimiters: ['${', '}'],
el: '#app2',
data: {
jobs: jobsData,
sectionTitles: [
"Administration, Finance, Stategy and Operations",
"Data",
"Poverty Research Unit",
"Product",
"Programs and Evaluation",
"Technology",
"The Service Design Studio"
]
},
methods: {
testOne: function(job, taxanomy, mainTag) {
try {
job.tags.forEach(tag => {
if(tag != taxanomy && tag != mainTag)
{
console.log(tag)
return tag;
}
})
} catch(err) {
console.log(`${err} for ${taxanomy} - ${mainTag}`);
}
}
}
});
}
In the code snippet above, my aim is clearly to obtain a 'tag' value. The statement return tag is intended to provide a string which I then intend to feed into the subsequent script tag.
<a :href="`${job.url}`">
${job.title}
</a>
<span class="text-right">
${ testOne(job, job.taxanomy, job.mainTag) }
</span>
Despite being able to view the returned string in console.log, the line
${ testOne(job, job.taxanomy, job.mainTag) }${ } due to a change in delimiters from {{ }} to ${ }.
https://i.sstatic.net/5ti4K.png