Ang*_*alu 5 javascript ecmascript-6 webpack vue.js vuejs2
我真的在努力解决以下问题:
一些索引页面:
<!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 }}"一部分让我发疯.
data-tab-url="1"我没有按预期解析胡子语法并返回,而是获得引号之间所有内容的解析/转义值.
有点像data-tab-url="%7B%7B+this.foo+%7D%7D".
现在,我该如何防止编码发生？从我所读到的,过去曾经有过一种方式vuejs 1.*.使用三个括号:{{{ this.foo }}}但它现在已被弃用,v-html而我不能用于我的示例.
小智 8
谢谢的回答是正确的，但是；
为了进一步了解：
您不能使用 Mustache 语法进行属性绑定。仅使用 Mustache {{}} dom 元素的内容，即。
<div>{{someValue}}</div> (THIS IS WRONG)
要绑定任何属性，包括模板道具任何其他属性，例如“src”或“data-tab-url”，您可以使用“v-bind:attr”或“:attr”简写，即。
<div v-bind:src="someDataVariable"></div>
或者
<div v-bind:some-prop="someMethod()"></div>
您可以使用组件或 Vue 应用程序的任何成员（数据、方法、计算等），无需“this”。
| 归档时间： |
|
| 查看次数： |
17585 次 |
| 最近记录： |