我如何将 v-for 中的 var 通过 onclick 返回给方法?
How do i pass a var from v-for back through onclick to a method?
我如何将 v-for 中的 var 通过 onclick 返回给方法?
HTML 片段:
<div v-for="image in images" class="addImg">
<img class="img-thumbnail" @click="addImage({{image.url}}) v-bind:src="image.url">
<span class="text-center"><i class="fa fa-arrow-left"></i> add</span>
</div>
脚本:
var vm = new Vue({
el: '#app',
data: {
newImages: false,
images: [
{ url: '<?php echo BASE_URL; ?>images/image1.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image2.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image3.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image4.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image5.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image6.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image7.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image8.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image9.jpg' }
]
},
methods: {
addImage : function (msg) {
alert(msg);
});
}
}
})
Chrome 控制台错误:
"attribute interpolation is not allowed in Vue.js directives and special attributes."
文档说 "Note that attribute interpolations are disallowed in Vue.js directives and special attributes. Don’t worry, Vue.js will raise warnings for you when mustaches are used in wrong places."
我收到了警告,但仍然看不到如何将其传回
您应该删除括号:
@click="addImage(image.url)"
我如何将 v-for 中的 var 通过 onclick 返回给方法?
HTML 片段:
<div v-for="image in images" class="addImg">
<img class="img-thumbnail" @click="addImage({{image.url}}) v-bind:src="image.url">
<span class="text-center"><i class="fa fa-arrow-left"></i> add</span>
</div>
脚本:
var vm = new Vue({
el: '#app',
data: {
newImages: false,
images: [
{ url: '<?php echo BASE_URL; ?>images/image1.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image2.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image3.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image4.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image5.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image6.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image7.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image8.jpg' },
{ url: '<?php echo BASE_URL; ?>images/image9.jpg' }
]
},
methods: {
addImage : function (msg) {
alert(msg);
});
}
}
})
Chrome 控制台错误:
"attribute interpolation is not allowed in Vue.js directives and special attributes."
文档说 "Note that attribute interpolations are disallowed in Vue.js directives and special attributes. Don’t worry, Vue.js will raise warnings for you when mustaches are used in wrong places."
我收到了警告,但仍然看不到如何将其传回
您应该删除括号:
@click="addImage(image.url)"