[Vuejs]-How to run component's method via HTML in Vue2

by

0👍

✅

You don’t need to manipulate DOM in Vue js for such trivial case, just add all you want to template and remove getInfo method, example:

Information.vue

<template>
   <div>
     <p>
       <b>Servicename:</b> <br>
       {{ service.name }}<br>
       <b>Another Field:</b> <br>
       {{ service.anotherField }}<br>
       <b>Another Field 2 :</b> <br>
       {{ service.anotherField2 }}<br>
     </p>      
   </div>  
</template>

OR if you really want to work with html do this:

Information.vue

<template>
   <div>
     <p v-html="getInfo(service)"/>      
   </div>  
</template>

<script>

 export default {
    props:['service'],
    data: function () {
       return {
         services: this.$store.state.Services.data
       }
    },
    methods: {
      getInfo: function (service) {
          if (!service) return '';
          var info = '<b>Servicename:</b> <br>';
          info += service.name;

          ... (method adds more to 'info' here)

          return info;
     }
   }
 }

👤Max Sinev

Leave a comment