用指令替换字符串在Vue中不起作用

Question

我有一个字符串，内容来自字符需要用component替换，但这不起作用。

示例文字：

  

（1）以阿拉（Allāh）的名义，{[2]}完全仁慈，尤其是仁慈。{[3]}

我有一种方法可以做到这一点 所以我如何使footnote在v-html内工作

 replaceFootnote(text,footnotes) {
        return text.replace(/{\[\d+\]}/g, function (x) {
          x = x.replace('{', '');
          x = x.replace('}', '');
          let xfootnote = footnotes.filter((item)=>{
           let number = x.replace('[','');
            number = number.replace(']','');
            return item.footnote_number == number;
          })[0].footnote;
          // return `<footnote :footnote_string="${xfootnote}" :footnote_number="${x}" />`;
        });

      },
    },

 <p class="PTafaserText" v-html="replaceFootnote(book.text,book.footnotes)">

<template>
  <a class='WithTip' data-trigger='focus'  role='button' tabindex='0' v-b-popover.hover="text">
    {{number}}
  </a>
</template>

<script>
  export default {
    name: "footnote",
    props: ['text','number']
  }
</script>

<style scoped>

</style>