javascript - Vue方法没有返回值

Question

我目前正在使用 Vue，我有一个方法应该返回一个显示在 <span> 中的字符串。 。当我 console.log 值时，我能够获得正确的值，但是没有被传递到 span 中标签。

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}`);
          }
        }
      }
    });
}

从上面的代码片段中您可以看到我正在返回一个值标签。 return tag假设返回一个字符串，然后将其传递到以下脚本标记中。

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

以下行未显示任何内容 ${ testOne(job, job.taxanomy, job.mainTag) }虽然我可以在 console.log 上看到返回字符串。我正在使用${ }因为我改变了分隔符 {{ }}至${ } 。

Answer 1

您没有从 testOne 返回值。您正在从传递给 forEach 的回调中返回一个值，这不是同一件事。

您可以使用filter根据您的条件过滤jobs，然后从数组中返回一个值。

 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}`);
      }
    }

我假设至少有一个结果，但情况可能并非如此。

此外，您的情况可能会产生多个结果，您也应该有一种处理这种情况的方法。