How to call a js function in a Vue loop and pass a parameter to js from Vue

Question

I am new to Vue and I am trying to display a table, but for every row, i want to call a js function pasing a value from the item dysplay on the row.

<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>

And the js part of my code is:

<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>

But I have this reasult as a javascript error in the browser:

Uncaught ReferenceError: callCustomFunction is not defined

The function I need to call it every time the row is loaded, and it needs to be called with the parameter of the item in the row display.

Thanks a lot!

What exactly does customFunction do? What value does it return? — Phil
– Phil, Commented Apr 30, 2019 at 0:52

Gabriele Di Simone · Accepted Answer · 2019-04-29 22:23:08Z

2

Delete the script tag, in the element with id "app" Vue can execute javascript code inside his template engine.

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

answered Apr 29, 2019 at 22:23

Gabriele Di Simone

1563 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

tony19 · Accepted Answer · 2022-07-16 03:12:12Z

0

Calling functions / methods from your template is very inefficient.

If you're just formatting a string based on the parameters provided (id and age), you might be better off adding a filter

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

and in your template

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

edited Jul 16, 2022 at 3:12

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Apr 30, 2019 at 0:50

Phil

166k25 gold badges265 silver badges269 bronze badges

Collectives™ on Stack Overflow

How to call a js function in a Vue loop and pass a parameter to js from Vue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related