Можно ли вложить методы в Vue.js для того, чтобы сгруппировать связанные методы?

Можно ли вложить методы в Vue.js для того, чтобы сгруппировать связанные методы?

20.03.2016 03:34:00 Просмотров 48 Источник

Я бы хотел сгруппировать некоторые из моих Vue.методы js объединены в своего рода" подметод " класса, но я, кажется, могу иметь только одноуровневые методы.

Например, если бы я хотел иметь набор методов, имеющих дело исключительно с действиями кнопок:

new Vue({

    el: '#app',

    data: { },

    methods: {

        buttonHandlers: {

            handler1: function() {
                dosomething;
            },

            handler2: function() {
                dosomething;
            }

        }

    }

});

Я ожидал бы, что смогу затем использовать что-то вроде:

<button v-on:click="buttonHandlers.handler1">Click Me</button>

но ничего не происходит.

Я пытался заставить функцию работать, добавляя скобки:

<button v-on:click="buttonHandlers.handler1()">Click Me</button>

но я получаю эту консольную ошибку:

Uncaught TypeError: scope.с пуговицами в руках.handler1 не является функцией

У меня есть небольшая установка https://jsfiddle.net/ozx9oc4c - чтобы показать, что я имею в виду.

Если кто-нибудь знает способ логически сгруппировать функции в родительских методах в Vue.js, а не страницы и страницы одноуровневых методов без реальной структуры, я был бы благодарен за ваши знания.

У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/36108953/is-it-possible-to-nest-methods-in-vue-js-in-order-to-group-related-methods#comment59859852_36108953
Если у вас есть страницы и страницы методов, скорее всего, вы должны создавать более мелкие компоненты. Скорее всего, ваша кнопка должна быть ее собственным компонентом.
https://stackoverflow.com/questions/36108953/is-it-possible-to-nest-methods-in-vue-js-in-order-to-group-related-methods#comment59859908_36108953
@ceejayoz полностью согласен - в данном случае я действительно работаю с многоступенчатой формой, и многие методы связаны с проверкой, пошаговой прогрессией, манипуляцией полями и т. д., Поэтому я хотел бы сохранить их в одном экземпляре Vue, если это возможно, но сгруппировать в логические классы; этот пример кнопки, который я привел, является самым быстрым релевантным образцом, который я мог бы придумать.

Ответы - Можно ли вложить методы в Vue.js для того, чтобы сгруппировать связанные методы? / Is it possible to nest methods in Vue.js in order to group related methods?

Raj Kamal

20.03.2016 08:39:56

если бы у меня была такая проблема, я бы использовал обработчик щелчка() для делегирования запроса другим методам. напр.:

new Vue({

    el: '#app',

    data: { },

    methods: {

        handler1: function() {
             console.log("handler 1 called");
        },

        handler2: function() {
            console.log("handler 2 called");
        },

        buttonHandler:function(callback){
            callback();
        }


    }

});

и использовать html как

<button v-on:click="buttonHandler(handler1)">Click Me</button>

<button v-on:click="buttonHandler(handler2)">Click Me</button>

Код предназначен только для демонстрации. В реальной жизни я буду передавать числовой или строковый аргумент в шаблоне и использовать switch case для определения обработчика.

https://stackoverflow.com/questions/36108953/is-it-possible-to-nest-methods-in-vue-js-in-order-to-group-related-methods/36117170#comment59897875_36117170
К сожалению, это решение все еще оставляет меня в том же положении, когда я заканчиваю с 3 функциями на верхнем уровне моего объекта методов - нет никакой логической организации в иерархии.
https://stackoverflow.com/questions/36108953/is-it-possible-to-nest-methods-in-vue-js-in-order-to-group-related-methods/36117170#comment59898182_36117170
хм, не могли бы Вы уточнить свой вариант использования? а также о скольких методах и логических разделах вы говорите? о, добавляйте информацию в свой пост, а не в комментарии здесь
Albion

22.03.2017 07:04:05

Самое близкое, что я могу сделать, это объявить родителя как функцию и вернуть объект с набором методов.

Пример:

new Vue({

  el: '#app',

  data: {},

  methods: {

    buttonHandlers: function() {
      var self = this; // so you can access the Vue instance below.

      return {

        handler1: function() {
          dosomething;
          self.doSomething();
        },

        handler2: function() {
          dosomething;
        },

      },

    }

  }

});

И вы можете вызвать методы вот так:

<button @click="buttonHandlers().handler1()">Click Me</button>
Paolo

03.07.2018 09:37:03

У меня была та же проблема (необходимость пространства имен) при написании Vue mixin. Этот ответ не касается непосредственно вашего дела, но он может дать ключ к разгадке.

Вот как я определил миксин.

export default {
   created () {
    // How to call the "nested" method
    this.dummy('init')

    // Pass arguments
    this.dummy('greet', {'name': 'John'})
   },

   // Namespaced methods
   methods: {
     dummy (name, conf) {
       // you can access reactive data via `that` reference,
       // from inside your functions
       const that = this

       return {
         'init': function (conf) {
            console.log('dummy plugin init OK')
         },
         'greet': function (conf) {
            console.log('hello, ' + conf['name'])
         }
       }[name](conf)
     }
   }
 }

PS: для официального решения, Эван, Вы сказали "нет".

silksofthesoul

19.12.2019 09:13:08

Я использую этот шаблон:

Шаблон:

<ExampleComponent
  :test="hello"
  @close="(arg) => example('close')(arg)"
  @play="(arg) => example('next')(arg)"
  @stop="(arg) => example('back')(arg)"/>

Скрипт:

...
methods: {
  test () {
    this.info('open')('test');
  },
  info (arg) {
    console.table({omg: [arg, '!']});
  },
  example (arg) {
    let self = this;
    const methods = {
      open (arg) {self.info(arg);},
      close (arg) { return self.example('play')(arg)},
      play (arg) {console.log(self, this)},
      stop () {console.error('Lo1')},
    };
    if (!Object.keys(methods).includes(arg)) return () => false;
    return methods[arg];
  },
}
...

И второй случай:

Скрипт:

const fabric = (arg, foo, context) => {
  const methods = foo(context);
  if (!Object.keys(methods).includes(arg)) return () => false;
  return methods[arg];
};

export default {
  ...
  methods: {
    test () {
      this.info('open')('test');
    },
    info (arg) {
      console.table({omg: [arg, '!']});
    },
    example (arg) {
      return fabric(arg, (cnx)=>({
        open (arg) {cnx.info(arg);},
        close (arg) { return cnx.example('play')(arg)},
        play (arg) {console.log(cnx, this)},
        stop () {console.error('Lo1')},
      }), this);
    },
  }
  ...
}

Кроме того, я думаю, что это не очень хорошая практика, но она работает и облегчает мою работу.

Dexygen

06.01.2020 06:07:46

На самом деле существует очень простая техника: создайте вложенные методы в createdкрюке:

created() {
  this.on = {
    test: () => {console.log(this)}
  }
  this.on.test();
}
Закрыть X