极客观点
项目管理
HarmonyOS
我真的在以下情况下苦苦挣扎：
一些索引页面：
<!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 安装下使用带有 webpack 的 babel。
场景是这样的：
- 当我单击
Click ME!链接时，foo和bar被更新并传递给组件（这部分正在工作） - 计算的属性，命名为
checkBool对于这个例子变为真，所以我会看到新的列表项（这部分工作） - 新列表项，有一个链接，文本正确设置为
bar（这部分也有效）
在这一点上，我知道组件和父级之间的值设置和通信工作正常，但是 data-tab-url="{{ this.foo }}" 部分让我发疯。
我没有按预期解析 mustache 语法并返回 data-tab-url="1" ，而是得到引号之间所有内容的解析/转义值。
类似 data-tab-url="%7B%7B+this.foo+%7D%7D" 的东西。
现在，如何防止编码发生？根据我的阅读，曾经有一种方法 vuejs 1.* 。使用三个括号： {{{ this.foo }}} 但它现在已被弃用，取而代之的是 v-html 我不能用于我的示例。
原文由 Angelin Calu 发布，翻译遵循 CC BY-SA 4.0 许可协议
像这样绑定属性
:data-tab-url="foo"。这将为受影响的元素提供一个
data-tab-url属性，其值等于组件的foo属性。