VueJS使用prop作为数据属性值 [英] VueJS Use prop as data-attribute value
问题描述
我真的很难处理以下情况：
I am really struggling with the following scenario:
某些索引页：
<!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>
某些单个文件组件：
<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>
而 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
}
}
});
我正在一个laravel instalation下使用带有webpack的babel。
I am using babel with webpack under a laravel instalation.
场景如下：
- 点击
单击ME！链接，foo和bar更新并传递给组件（此部分正在运行） - 此示例的计算属性命名为
checkBool成为true，所以我将看到新的列表项（这部分正在运行） li>
- 新建列表项，具有链接，文本正确设置为
bar（此部分也正在运行）
- 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)
此时，我知道组件和父级之间的值设置和通信工作正常，但是 data-tab-url = {{this.foo}}部分正在让我疯狂。
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 =1，我得到引号之间的所有内容的解析/转义值。
Instead of parsing the moustache syntax as expected and return data-tab-url="1", I get a parsed/escaped value of everything between quotes.
Som像 data-tab-url =％7B％7B + this.foo +％7D％7D。
现在，如何防止编码发生？
从我读过的，以前在 vuejs 1。* 中有一种方法。使用三个方括号： {{this.foo}}} 但现在已经不赞成使用 v-html 我不能用于我的例子。
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.
推荐答案
绑定这样的属性：data-tab-url = foo 的。
这将给受影响的元素一个 data-tab-url 属性，其值等于 foo 您的组件属性。
This will give the affected element a data-tab-url attribute with a value equal to the foo property of your component.
这篇关于VueJS使用prop作为数据属性值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
