title: How to link words in an HTML string and assign them @click method in VueJS 2?
body: <p>I have a array of strings in which I want to linkify certain words like "User object", "Promise", etc like this:</p>
  
  <pre><code>var strings = ['This returns a promise containing a User Object that has the id', 'next string']
  </code></pre>
  
  <p>This needs to be rendered like this</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="item" v-for="str in strings" v-html="str"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The problem is I want to replace words like "User object", "Promise" and bind them to a <code>@click</code> event that my app can handle.</p>
  
  <p>So if it were rendered like I want it to be, it would be something like this (the same v-for loop above rendered manually)</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="item"&gt;This returns a &lt;a href="#" @click.prevent="help('promise');"&gt;promise&lt;/a&gt; containing a &lt;a href="#" @click.prevent="help('User object');"&gt;User object&lt;/a&gt; that has the id&lt;/div&gt;
      &lt;div class="item"&gt;next string&lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I tried doing this but it doesn't bind the <code>@click</code> event</p>
  
  <pre><code>methods: {
      linkify(str) {
         return str.replace(/user object/, '&lt;a href="#" @click="help"&gt;User object&lt;/a&gt;');
      }
  }
  </code></pre>
  
  <p>Any ideas?</p>