vue+bulma Tabs Error:'openTab' is defined but never used

Question

I would like to create a tab using vue and bulma, but I'm getting the following error:

error: 'openTab' is defined but never used (no-unused-vars) at

code:

<template>
<div>
  <div class="tabs is-centered">
    <ul>
      <li class="tab is-active" onclick="openTab(e,'adult')"><a>Adult</a></li>
      <li class="tab" onclick="openTab(e,'card')"><a>Card</a></li>
      <li class="tab" onclick="openTab(e,'food')"><a>Food</a></li>
    </ul>
  </div>

    <div id="adult" class="content-tab">
        <img :src="require(`../../static/dst/${parentData.file_name}`)">
            <div  v-bind:style="{ color: `${parentData.font_color}`}">
                    {{parentData.info_text}}<br>
                    {{parentData.rate_adult}}{{parentData.part_name}}<br>
                    {{parentData.rate_part}}
            </div>
    </div>

    <div id="card" class="content-tab" style="display: none">
        <div :style="{ color: `${parentData.card_color}`}">
                {{parentData.card_text}}
        </div>
    </div>

    <div id="food" class="content-tab" style="display: none">
        {{parentData.class_name}}
    </div>
</div>
</template>

<script>
     export default {
         name: 'Child',
         props: ['parentData'],
         
     openTab(e, tabName) {
             var i, x, tablinks;
             x = document.getElementsByClassName("content-tab");
             for (i = 0; i < x.length; i++) {
                 x[i].style.display = "none";
             }
             tablinks = document.getElementsByClassName("tab");
             for (i = 0; i < x.length; i++) {
                 tablinks[i].className = tablinks[i].className.replace(" is-active", "");
             }
             document.getElementById(tabName).style.display = "block";
             e.currentTarget.className += " is-active";
     }
     }
</script>

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

I want to find the answer to this problem.

Tap function does not apply.

Process:

1. Upload an image
2. Return json contents
3. Check by tap

Can you tell me what the error is?

Answer 1

Your openTabs function should be part of methods. So:

props: {},
methods: {
    openTab()
}

More information here: https://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers