Javascript VueJS 使用 prop 作为数据属性值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43236848/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
VueJS Use prop as data-attribute value
提问by Angelin Calu
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.jslooks something like this:
而且app.js看起来是这样的：
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.
我在 laravel 安装下使用带有 webpack 的 babel。
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)
- 当我点击
Click ME!链接，foo和bar更新，并传递到组件（这部分工作） checkBool为这个例子命名的计算属性变为真，所以我会看到新的列表项（这部分正在工作）- 新列表项，有一个链接，文本正确设置为
bar（这部分也有效）
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.
在这一点上，我知道组件和父级之间的值设置和通信工作正常，但data-tab-url="{{ this.foo }}"部分让我发疯。
Instead of parsing the moustache syntax as expected and return data-tab-url="1", I get a parsed/escaped value of everything between quotes.
data-tab-url="1"我没有按预期解析 mustache 语法并返回，而是得到引号之间所有内容的解析/转义值。
Something like data-tab-url="%7B%7B+this.foo+%7D%7D".
类似的东西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-htmlwhich I cannot use for my example.
现在，如何防止编码发生？从我读过的内容来看，过去有一种方法可以进入vuejs 1.*. 使用三个括号：{{{ this.foo }}}但它现在已被弃用v-html，我不能在示例中使用它。
回答by thanksd
Bind the attribute like this :data-tab-url="foo".
像这样绑定属性:data-tab-url="foo"。
This will give the affected element a data-tab-urlattribute with a value equal to the fooproperty of your component.
这将为受影响的元素提供一个data-tab-url属性，其值等于foo组件的属性。
回答by user1920580
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.
您不能将 mustache 语法用于属性绑定。仅使用 mustache {{}} dom 元素的内容，即。
<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.
要绑定任何属性，包括模板道具任何其他属性，例如“src”或“data-tab-url”，您可以使用“v-bind:attr”或“:attr”速记，即。
<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".
您可以使用组件或 Vue 应用程序的任何成员（数据、方法、计算等），而无需“this”。
