我真的很难应对以下情况:
一些索引页:
<!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安装下带有网页包的babel.
情况是这样的:
- 当我点击
Click ME!链接时，foo和bar被更新并传递给组件(这部分正在工作) - 本例中名为
checkBool的computed属性变为true，因此我将看到新的列表项(这部分正在工作) - 新列表项，有一个链接，文本正确设置为
bar(这部分也在工作)
在这一点上，我知道组件和父组件之间的值设置和通信工作正常，但是data-tab-url="{{ this.foo }}"部分让我抓狂.
我没有像预期的那样解析mustache 语法并返回data-tab-url="1"，而是得到引号之间所有内容的解析/转义值.
大约data-tab-url="%7B%7B+this.foo+%7D%7D".
现在，我如何防止编码发生？