Question

我正在尝试调用一个函数，该函数从vue.js组件内部生成一个url。该函数为[[ generateGitUrl ]]

我不确定我是否朝着解决这个问题的正确方向前进。我的示例不起作用，因为我没有将repo, branch, hash传递给该方法。所以我的问题是，如何在示例中将这些数据从模板传递到[[ generateGitUrl ]]（如果可能的话）？我怀疑我会完全以错误的方式进行操作，因此很容易接受建议。

vue.js组件

Vue.component('git-refs', {
    delimiters: [ '[[', ']]' ],
    props: ['jobs'],
    template: `
    <div envVars>
      <h3>Github Links</h3>
      <table>
      <template v-for="item in jobs">
      <tr>
      <td><b>Repo</b></td>
      <td><b>Branch</b></td>
      <td><b>Ref</b></td>
      </tr>
       <tr v-for="i in item.code_checkouts">
          <td>[[ i.git_repo.name ]]</td>
          <td>[[ i.git_branch_name ]]</td>
          <td>
          <a v-bind:href='[[ generateGitUrl ]]'>
          [[ i.git_hash ]]
          </a>
          </td>
       </tr>
      </template>
      </table>
    </div>
    `,
    methods: {
        generateGitUrl: function(repo, branch, hash) {
            repo = repo.split(":")[1];
            newUrl = branch+'/'+repo+hash
            return 'github.corp.test.com/' + newUrl 
        }
    },
});

示例数据：

repo: 'git@github.corp.test.com:team/jenkins.git'
hash: '43tsf454w3jg390t3fi'
branch: 'feature/newfeature'

Answer 1

您可以像任何函数一样使用parens进行调用，例如<a :href="getURL(arg1, arg2)">click me</a>

在您的情况下：

<a v-bind:href="generateGitUrl(i.git_repo.name, i.git_branch_name, i.git_hash)">

我不清楚这些参数是否适合您的特定情况，但您明白了。

如何从vue.js组件模板内部使用args调用方法？

1 个答案: