Vue method not returning value

I’m currently working with Vue, I have a method that is suppose to return a string which is displayed in a <span>. When I console.log the value I’m able to get the correct value however is not being passed 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}`);
          }
        }
      }
    });
}

From the above code snippet you can see that I am returning a value tag. return tag is suppose to return a string which I then pass into the following script tag.

              <a :href="`${job.url}`">
                  ${job.title}
                </a>
                <span class="text-right">
                  ${ testOne(job, job.taxanomy, job.mainTag) }
                </span>

The following line is not displaying anything ${ testOne(job, job.taxanomy, job.mainTag) } although I’m able to see the return string on the console.log. I’m using ${ } because I changed the delimeters from {{ }} to ${ }.

Answer

You are not returning a value from testOne. You are returning a value from the callback passed to forEach, which is not the same thing.

You can use filter to filter jobs according to your condition and then return a value from the array.

 testOne: function(job, taxanomy, mainTag) {
      try {
        const filtered = job.tags.filter(tag => tag != taxanomy && tag != mainTag )
        return filtered[0]
      } catch(err) {
        console.log(`${err} for ${taxanomy} - ${mainTag}`);
      }
    }

I’m assuming that there is at least one result, which may not be the case.

Also your condition may yield more than one result, you should have a way of dealing with this case also.