vuejs 将数据传递给模板 html 属性 [英] vuejs pass data to template html attributes

问题描述

我对 Vuejs 很陌生.我看到了如何将数据(变量)传递到组件中，但在我的代码中，我需要在模板的 HTML 属性中获取这些变量.

这里是我的 HTML:

<myimage text="{{ art_text }}" type="art"></myimage>

这里是我的 Vuejs 代码(分隔符已更改，因为 Twig):

<script type="text/javascript" src="{{ asset('js/vue.js') }}"></script><script type="text/javascript">Vue.component('myimage', {分隔符:['${', '}'],道具:['文本'，'类型']，模板:'<div class="col-lg-3 col-md-3" style="padding-top: 20px;"><h3><a title="${text}" href="#"><span><img style="width:220px;"alt="图片 ${type}"></span></a></h3><span>${text}</span></div>'});新的 Vue({el: '#活动'});

但例如，在我的模板中，我不明白为什么title"属性没有得到变量 ${text} ...

是否有另一种方法可以将数据从自定义元素传递到模板的 HTML 属性?

解决方案

问题是:

<块引用>

属性内的插值已被删除.改用 v-bind 或冒号速记.

此外，每个文档:

<块引用>

Mustache 不能在 HTML 属性中使用.相反，使用 v-bind 指令.

所以，而不是 title="${text}"(也就是说，因为您使用的是自定义 delimiters，相当于 title="{{ text }}"),

使用:

v-bind:title="text"

或 v-bind 的 简写:

:title="text"

I'm very new to Vuejs. I see how to pass data (variables) into components, but in my code I need to get thoses variables in the HTML attributes of the template.

Here my HTML :

<div id="activities" class="row text-center activities">
     <myimage text="{{ art_text }}" type="art"></myimage>
</div>

Here my Vuejs code (delimiters changed, because of 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>

But for example, in my template I don't see why "title" attribute don't get the variable ${text} ...

Is there another way to pass data from custom element to HTML attributes of the template ?

解决方案

The problem is:

Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead.

Also, per docs:

Mustaches cannot be used inside HTML attributes. Instead, use a v-bind directive.

So, instead of title="${text}" (which is, because you are using custom delimiters, the equivalent of title="{{ text }}"),

Use:

v-bind:title="text" 

Or v-bind's shorthand:

:title="text" 

这篇关于vuejs 将数据传递给模板 html 属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！