Vue Методы хранения внутри массива / объекта

Question

скажем, у нас есть 5 кнопок с точно такими же функциями. Вот почему я подумал, а не копировать и вставлять эти 5 кнопок, почему бы не использовать v-for.

methods: {
    a() {}, 
    b() {},
    ...
}

Вместо

<v-btn block color="primary" class="my-1" @click="a">A</v-btn>
<v-btn block color="primary" class="my-1" @click="b">B</v-btn>
<v-btn block color="primary" class="my-1" @click="c">C</v-btn>
<v-btn block color="primary" class="my-1" @click="d">D</v-btn>
<v-btn block color="primary" class="my-1" @click="e">E</v-btn>

Пытался использовать

 <v-btn v-for="(button, index) in buttons" :key="index"
      block color="primary" class="my-1" 
      @click="button.click">{{button.text}}
 </v-btn>

buttons: [
        { click: this.a, text: "A"},
        { click: this.b, text: "B"},
        { click: this.c, text: "C"},
        { click: this.d, text: "D"},
        { click: this.e, text: "E"},
      ]

• Работает, как и ожидалось, однако, когда я пытаюсь сделать это объект кнопки я получаю что-то вроде этого. Почему кликов там нет?

  [ { "text": "A" }, { "text": "B" }, { "text": "C" }, { "text": "D" }, { "text": "E" } ]
  

• Давайте go еще один шаг, и давайте добавим кнопку с динамическим c текстом (другое поле данных)

  boolean: true
  F: "data1"
  
  f() {boolean ? this.F = "data1" : "data2"}
  <v-btn block color="primary" class="my-1" @click="F">{{F}}</v-btn>
  

На этот раз я получаю

[ { "text": "A" }, { "text": "B" }, { "text": "C" }, { "text": "D" }, { "text": "E" }, {} ]

Текст кнопки не меняется, однако при рендеринге {{F}} я вижу изменения данных.

• В чем причина этого и как справляться с подобными ситуациями?

Я пытался создать метод, такой как setButtons и массив возвращаемых кнопок и поле кнопок set, на этот раз при рендеринге кнопок я получаю весь объект, как и ожидалось, но при изменении данных, таких как F, объект не обновляется снова.

Answer 1

Если мое понимание верно, вы хотите преобразовать метод в @click из for-l oop?

, вы можете создать вспомогательную функцию для его обработки.

здесь bindFunction() возьмет строку button.click и вернет function

new Vue({
  el: "#app",
  data: {
        buttons: [
        { click: "toggleA", text: "A" },
        { click: "toggleB", text: "B" },
        { click: "toggleC", text: "C" },
        { click: "toggleD", text: "D" },
        { click: "toggleE", text: "E" }
      ]
  },
  methods: {
  	bindFunction(f) {
      this[f]();
    },
    toggleA() {
      console.log("toggleA");
    },
    toggleB() {
      console.log("toggleB");
    },
    toggleC() {
      console.log("toggleC");
    },
    toggleD() {
      console.log("toggleD");
    },
    toggleE() {
      console.log("toggleE");
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
    <div v-for="(button, index) of buttons" :key="index">
      <button @click="bindFunction(button.click)">{{button.text}}</button>
    </div>
</div>