如何在 Vue2 中通过 HTML 运行组件的方法

Posted 2023-02-23

【中文标题】如何在 Vue2 中通过 HTML 运行组件的方法

【英文标题】：How to run component's method via HTML in Vue2

【发布时间】：2018-12-20 18:05:18

【问题描述】：

我有一个 .vue 文件 ServiceList，它导入组件 Information.vue。我想在ServiceList的模板中循环运行Information的代码，如下所示：

ServiceList.vue

<template>
  <div> 
    <h1>Headline</h1>
    <div v-for="service in services">
      <h2> service.name </h2>
      <information v-bind:service="service"/>
    </div>
  </div>
</template>

<script>

import Information from './Information'
... (more components here)

export default 
  components: 
    Information,
    ... (more components here)
  ,
  ... (rest of export here)


</script>

这是Information 的样子：

Information.vue

<template>
  <div>
    <p v-bind:id="'info'+service.id"/>      
  </div>  
</template>

<script>

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

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

        document.getElementById('info'+service.id).innerhtml = info;
    
  


</script>

我尝试过做类似的事情

<template>
  <div>
    <p v-bind:id="'info'+service.id"/>  
     getInfo(service)   
  </div>  
</template>

但它似乎从来没有工作过。奇怪的是，当我把它做成一个按钮时，

<template>
  <div>
    <button v-on:click="getInfo(service)">GET INFO</button> 
    <p v-bind:id="'info'+service.id"/>
  </div>  
</template>

完美运行！但我不想要按钮，我只想让它出现。

【问题讨论】：

我不明白你的问题。

你为什么要在getInfo生成HTML，用vue模板就行了

我怀疑该方法实际上正在运行（您可以使用 console.log 进行测试）但目前

【参考方案1】：

对于这种琐碎的情况，你不需要在 Vue js 中操作 DOM，只需添加所有你想要的模板并删除 getInfo 方法，例如：

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>

或如果您真的想要使用 html，请执行以下操作：

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;