title: VueJS Use prop as data-attribute value
body: <p>I am really struggling with the following scenario:</p>
  
  <p>Some index page:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="app"&gt;
  
        &lt;ul&gt;
          &lt;li&gt;some existing option&lt;/li&gt;
          &lt;example-component :foo="foo" :bar="bar"/&gt;
        &lt;/ul&gt;
  
        &lt;a @click.prevent="showDetail(1, 'abc')" href="#" &gt;Click ME!&lt;/a&gt;
  
      &lt;/div&gt;
  
  
      &lt;script src="app.js"&gt;&lt;/script&gt;
  
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Some single file component:</p>
  
  <pre><code>&lt;template&gt;
      &lt;li&gt;&lt;a v-show="checkBool" data-toggle="tab" class="some-class" href="#container-div" data-tab-url="{{ this.foo }}"&gt;{{ this.bar }}&lt;/a&gt;&lt;/li&gt;
  &lt;/template&gt;
  
  
  
  &lt;script&gt;
  export default {
  
    props: ['foo', 'bar'],
  
  
    computed: {
      checkBool: function() {
        return (this.foo != undefined &amp;&amp; this.bar != undefined )
      }
  
    }
  
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>And the <code>app.js</code> looks something like this:</p>
  
  <pre><code>import Vue from 'vue'
  
  Vue.component('example-component', require('ExampleComponent.vue'));
  
  const app = new Vue({
      el: '#app',
  
      props: [
        'foo',
        'bar'
      ],
  
      data: {
        foo: '',
        bar: ''
      },
  
       methods: {
        showDetail: function (foo, bar) {
          this.foo = foo,
          this.bar = bar
        }
    }
  });
  </code></pre>
  
  <p>I am using babel with webpack under a laravel instalation.</p>
  
  <p>The scenario is like this:</p>
  
  <ul>
  <li>When I click the <code>Click ME!</code> link, <code>foo</code> and <code>bar</code> are updated and passed to the component (This part is working)</li>
  <li>The computed property, named <code>checkBool</code> for this example becomes true, so I will then see the new list item (This part is working)</li>
  <li>New list item, has a link, with the text correctly set to <code>bar</code> (This part is also working)</li>
  </ul>
  
  <p>At this point I know that the values setting and communication between component and parent is working properly, however <code>data-tab-url="{{ this.foo }}"</code> part is driving me crazy.</p>
  
  <p>Instead of parsing the moustache syntax as expected and return <code>data-tab-url="1"</code>, I get a parsed/escaped value of everything between quotes.</p>
  
  <p>Something like <code>data-tab-url="%7B%7B+this.foo+%7D%7D"</code>.</p>
  
  <p>Now, how do I prevent the encode from happening?
  From what I've read, there used to be a way in <code>vuejs 1.*</code>. Using three brackets: <code>{{{ this.foo }}}</code> but it's now deprecated in favor of <code>v-html</code> which I cannot use for my example.</p>