{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 兄弟一词,经得起流年. 的问题《VueJS Use prop as data-attribute value》','https://www.manongdao.com/q-536458.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
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:
- When I click the
Click ME!link,fooandbarare updated and passed to the component (This part is working) - The computed property, named
checkBoolfor this example becomes true, so I will then see the new list item (This part is working) - New list item, has a link, with the text correctly set to
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.
Bind the attribute like this
:data-tab-url="foo".This will give the affected element a
data-tab-urlattribute with a value equal to thefooproperty of your component.