我真的在为以下情况而苦苦挣扎:
一些索引页:
<!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的计算属性变为 true，因此我将看到新的列表项(这部分正在运行) - 新列表项，有一个链接，文本正确设置为
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 我不能将其用于我的示例。
最佳答案
像这样绑定(bind)属性 :data-tab-url="foo"。
这将为受影响的元素提供一个 data-tab-url 属性，其值等于组件的 foo 属性。
关于javascript - VueJS 使用 prop 作为数据属性值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43236848/