vue.js - vuejs 将数据传递给模板 html 属性

Question

我是 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 属性吗？

Answer 1

问题是:

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"