我真的很难处理以下情况：
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' Vueponent('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, foo and bar are updated and passed to the component (This part is working)
- The computed property, named checkBool for 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作为数据属性值
发布评论