I am really struggling with the following scenario:
Some index page:
<!doctype html> <html> <head> <meta charset="utf-8"/> </head> <body> <div id="app"> <ul> <li>some existing option</li> <example-component :foo="foo" :bar="bar"/> </ul> <a @click.prevent="showDetail(1, 'abc')" href="#" >Click ME!</a> </div> <script src="app.js"></script> </body> </html>
Some individual file components:
<template> <li><a v-show="checkBool" data-toggle="tab" class="some-class" href="#container-div" data-tab-url="{{ this.foo }}">{{ this.bar }}</a></li> </template> <script> export default { props: ['foo', 'bar'], computed: { checkBool: function() { return (this.foo != undefined && this.bar != undefined ) } } } </script>
And app.js looks something like this:
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 } } });
I am using babel with webpack under laravel installation.
The scenario is as follows:
- When I click the
Click ME! , foo and bar are updated and passed to the component (this part works) - The computed property named
checkBool for this example becomes true, so I will see a new list item (this part works) - The new list item has a link, the text is correctly set to
bar (this part also works)
At this point, I know that the value settings and the relationship between the component and the parent are working correctly, however the data-tab-url="{{ this.foo }}" part is driving me crazy.
Instead of the syntax syntax for the mustache as expected, and return data-tab-url="1" , I get the syntactic difference / excluded value between the quotes.
Something like data-tab-url="%7B%7B+this.foo+%7D%7D" .
Now, how can I prevent encoding? From what I read, in vuejs 1.* was a way. Using three brackets: {{{ this.foo }}} , but now it is deprecated in favor of v-html , which I cannot use for my example.