CODEWITHSUNDEEP
functionloopsvue.jsvuejs2
kike
kike

Reputation: 738

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

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!

Upvotes: 0

Views: 994

Answers (2)

Phil
Phil

Reputation: 164796

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>

Upvotes: 0

Gabriele Di Simone
Gabriele Di Simone

Reputation: 156

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>

Upvotes: 2

Related Questions