我是 Vuejs 的新手。 我看到了如何将数据(变量)传递到组件中,但在我的代码中,我需要在模板的 HTML 属性中获取这些变量。
这是我的 HTML :
<div id="activities" class="row text-center activities">
<myimage text="{{ art_text }}" type="art"></myimage>
</div>
这里是我的 Vuejs 代码(由于 Twig,分隔符改变了):
<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script>
<script type="text/javascript">
Vue.component('myimage', {
delimiters: ['${', '}'],
props: ['text', 'type'],
template: '<div class="col-lg-3 col-md-3" style="padding-top: 20px;"><h3><a title="${text}" href="#"><span> <img style="width:220px;" alt="Image ${type}"> </span></a></h3><span>${text}</span></div>'
});
new Vue({
el: '#activities'
});
</script>
但是例如,在我的模板中,我不明白为什么“title”属性没有得到变量 ${text} ...
还有另一种方法可以将数据从自定义元素传递到模板的 HTML 属性吗?
最佳答案
问题是:
Interpolation inside attributes has been removed. Use
v-bind
or the colon shorthand instead.
此外,per docs :
Mustaches cannot be used inside HTML attributes. Instead, use a
v-bind
directive.
因此,不是 title="${text}"
(因为您使用的是自定义 delimiters
,而是等同于 title="{ {文本}}"
),
使用:
v-bind:title="text"
或 v-bind
的shorthand :
:title="text"
关于vue.js - vuejs 将数据传递给模板 html 属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49515900/