我的vue组件是这样的:
<template>
<div>
<div class="panel-group" v-for="item in list">
...
<div class="panel-body">
<a role="button" data-toggle="collapse" href="#purchase-{{ item.id }}" class="pull-right" aria-expanded="false" aria-controls="collapseOne">
Show
</a>
</div>
<div id="purchase-{{ item.id }}" class="table-responsive panel-collapse collapse" role="tabpanel">
...
</div>
</div>
</div>
</template>
<script>
export default {
...
computed: {
list: function() {
return this.$store.state.transaction.list
},
...
}
}
</script>
执行时,会出现如下错误:
Vue模板语法错误:
id ="purchase - {{item.id}}":已删除内部属性中的插值.改为使用v-bind或冒号.
我该如何解决？
我的Vue组件包含一些图像.我想稍后进行延迟加载,所以我需要先将图像的src设置为一个小图像.
<template>
<div v-for="item in portfolioItems">
<a href="#{{ item.id }}">
<img
data-original="{{ item.img }}"
v-bind:src="/static/img/clear.gif"
class="lazy" alt="">
</a>
</div>
</template>
给了我一堆错误,比如:
[Vue警告]:表达式无效.生成的函数体:/scope.static/scope.img/scope.clear.gif vue.common.js:1014 [Vue
[Vue警告]:评估表达式"/static/img/clear.gif"时出错:TypeError:无法读取undefined的属性'call'(在component :)中找到
webpack.config.js:module.exports = {// ... build:{assetsPublicPath:'/',assetsSubDirectory:'static'}}
如何在 Vue.js 应用程序中动态加载 JavaScript 脚本？
这是一个天真的解决方案：
<script async v-bind:src="srcUrl"></script>
<!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->
但第一行不会加载脚本（它不会将script元素添加到 HTML）。
第二行有效。第二行是相同的，只是 app 变量被替换为纯文本 ( srcUrl => https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37)。
我的错误在哪里？
完整的演示供参考（它应该在空白页面上加载谷歌自定义搜索引擎）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
</head>
<body>
<div id="load-script">
<div>{{ srcUrl }}</div>
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults"></div>
<script async v-bind:src="srcUrl"></script>
<!--<script async src="https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"></script>-->
</div>
<script>
new Vue({
el: '#load-script',
data: {
srcUrl: "https://cse.google.com/cse.js?cx=007968012720720263530:10z7awj2l37"
}
});
</script>
</body>
</html>
我找到了相关问题，但它们似乎没有准确描述这种情况：