Question

我是Vue的新手，我想显示一个表，但是对于每一行，我想调用一个js函数，从该行上的dysplay项中粘贴一个值。

<div id="app">

  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Breed</th>
        <th>Gender</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="cat in cats">
<!--  I changed the default delimiter of Vue '{{' for '((' because I have 
golang as a server-side language and interfers with the '{{' notations 
of golang templates -->
        <td>*((cat.name))</td>
        <td>*((cat.age))</td>
        <td>*((cat.breed))</td>
        <td>*((cat.gender))
<script type="application/javascript"> 
// This is the script I can not make work
                           *(( callCustomFunction(cat.id, cat.age) ))
                            </script>

</td>
      </tr>
    </tbody>
  </table>

</div>

我的代码的js部分是：

<script type="text/javascript">

      const app = new Vue({
        el:'#app',
        data:{
          sales: JSON.parse({{.JSON}}),
        },
        delimiters: ['*((', '))'],
        methods: {

          /* This is the function that calls to my 
          custom fuction in an import customFunction.js */

          callCustomFunction: function() {
            customFunction(id, age);
          },
      });

</script>

但是我有这样的结果，因为浏览器中出现了JavaScript错误：

Uncaught ReferenceError: callCustomFunction is not defined

每次加载行时我都需要调用该函数，并且需要在行显示中使用该项目的参数来调用它。

非常感谢！

Answer 1

删除脚本标签，在ID为“ app”的元素中，Vue可以在其模板引擎内执行javascript代码。

<td>*((cat.gender)) *(( callCustomFunction(cat.id, cat.age) ))</td>

Answer 2

从模板中调用函数/方法是very inefficient。

如果您只是根据提供的参数（id和age）设置字符串格式，最好添加一个filter

new Vue({
  el: '#app',
  data: {
    cats: [/* whatever */]
  },
  filters: {
    catFormatter ({ id, age }) {
      return customFunction(id, age)
    }
  },
  // etc
})

并在您的模板中

<td>*((cat.gender)) *((cat | catFormatter))</td>

如何在Vue循环中调用js函数并将参数从Vue传递给js

2 个答案: