时间戳

首页 > 解决方案 > VueJS - 方法内的动态函数名称

laravel - VueJS - 方法内的动态函数名称

问题描述

我有一个列表和导航，它根据数据行数生成 12 个项目/页。

我的导航按钮触发 vue-js v-on:click 事件

我也在尝试动态生成 JS 文件中的函数方法，但似乎无法在方法部分中放入循环语句。不断收到语法错误。

vueJS 方法部分中是否有特定的 JS 语法？

        methods: {

        for (x = 0; x < 2; x++){
            featuredStores.'x' = function(){
                 for (y = 0; y < 2; y++)
                this.storeFeatNav.'y' = !this.storeFeatNav.'y'
        }}

如果有帮助，我也在使用 Laravel 框架。

谢谢

标签： laravelvue.js

解决方案

很明显，您想要动态添加方法，但不清楚您在动态方法附件代码中做了什么。因此，我将向您展示一种动态添加方法的方法，例如：

var methods = {
    greet() {
        console.log(this.message + ' from greet method.');
    }
};

for (let x = 0; x < 2; x++)  {
    methods['featuredStores'+x] = function() {
        console.log(this.message + ' from featuredStores'+x+' method.');
    }
}

请注意，methods['featuredStores'+x]实际上是通过在循环内将 的值x与字符串连接起来来创建方法名称，featuredStores所以第一次的值x是0产生featuredStores0的，第二次的值x是1产生的featuredStores0，最后你有三个方法，它们是：

greet // hard coded
featuredStores0 // added dynamically within the loop
featuredStores1 // added dynamically within the loop

现在，您只需methods在创建实例时将对象添加为新实例的属性Vue，例如：

var demo = new Vue({
    el: '#demo',
    methods: methods, // or just methods
    data:{
        message: "Hello World"
    }
});

要查看它的实际效果，请运行以下代码片段（希望这会给您一些想法）：

var methods = {
    greet() {
        console.log(this.message + ' from greet method.');
    }
};

for (let x = 0; x < 2; x++)	 {
    methods['featuredStores'+x] = function() {
        console.log(this.message + ' from featuredStores'+x+' method.');
    }
}

var demo = new Vue({
    el: '#demo',
    methods,
    data:{
        message: "Hello World"
    },
    created() {
    	this.greet();
        this.featuredStores0();
	this.featuredStores1();
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/0.8.6/vue.min.js"></script>
<div id="demo">
    {{message}}
</div>

推荐阅读