Question

如何通过onclick将var从v-for传递给方法？

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控制台错误：

＆＃34; Vue.js指令和特殊属性中不允许属性插值。＆＃34;

文档说＆＃34;请注意，Vue.js指令和特殊属性中不允许使用属性插值。别担心，当胡子在错误的地方使用时，Vue.js会为你发出警告。＆＃34;

我收到警告，但仍然无法看到如何将其传回

Answer 1

您应该删除括号：

@click="addImage(image.url)"

如何将var从v-for传递回onclick到方法？

1 个答案: