Menu
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 single file component:
<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 the 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 a laravel instalation.
The scenario is like this:
Click ME! link, foo and bar are updated and passed to the component (This part is working)checkBool for this example becomes true, so I will then see the new list item (This part is working)bar (This part is also working)At this point I know that the values setting and communication between component and parent is working properly, however data-tab-url="{{ this.foo }}" part is driving me crazy.
Instead of parsing the moustache syntax as expected and return data-tab-url="1", I get a parsed/escaped value of everything between quotes.
Something like data-tab-url="%7B%7B+this.foo+%7D%7D".
Now, how do I prevent the encode from happening?
From what I've read, there used to be a way in vuejs 1.*. Using three brackets: {{{ this.foo }}} but it's now deprecated in favor of v-html which I cannot use for my example.
417
To specify the type of prop you want to use in Vue, you will use an object instead of an array. You'll use the name of the property as the key of each property, and the type as the value. If the type of the data passed does not match the prop type, Vue sends an alert (in development mode) in the console with a warning.
While you can pass a function as a prop, this is almost always a bad idea. Instead, there is probably a feature of Vue that is designed exactly to solve your problem. If you keep reading you'll see what I mean. Join 11,067 other Vue devs and get exclusive tips and insights delivered straight to your inbox, every week.
To pass in the properties of an object as props, we can use the v-bind without the argument. Then the properties of post will be passed into blog-post as prop values. The property names are the prop names.
Bind the attribute like this :data-tab-url="foo".
This will give the affected element a data-tab-url attribute with a value equal to the foo property of your component.
185
thanksd's answer is right but;
for further understanding:
You can't use mustache syntax for attribute binding. Use mustache {{}} only content of a dom element, ie.
<div>{{someValue}}</div> (THIS IS WRONG)
To bind any attribute, including template props any other attribute, such as "src" or "data-tab-url" like in question, you can use "v-bind:attr" or ":attr" shorthand, ie.
<div v-bind:src="someDataVariable"></div>
or
<div v-bind:some-prop="someMethod()"></div>
You can use any member(data, method, computed etc.) of your component or Vue app, without "this".
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
