Vuejs - list - Как передать функции щелчка как строку

Question

У меня есть массив объектов, каждый со свойством click (строка), который передается обработчику click -event. Я могу напечатать свойство .click на консоли, но оно не распознается как данные Vue. Я пытался eval(todo.click), но это не сработало.

HTML:

<div id="app">
  <h2>Todos:</h2>
  <ol>
    <li v-for="todo in todos">
      <label @click="clickMethod(todo)">{{todo.text}}</label>
    </li>
  </ol>
  <br>
  <div v-if="infoVisible">infoVisible</div>
  <div v-if="tresVisible">tresVisible</div>
</div>

и мои JS:

new Vue({
  el: "#app",
  data: {
    infoVisible:false,
    tresVisible:true,
    todos: [
      { text: "Learn JavaScript", done: false, click:'infoVisible=!infoVisible' },
      { text: "Learn Vue", done: false, click:'infoVisible=!infoVisible' },
      { text: "Play around in JSFiddle", done: true , click:'infoVisible=!infoVisible'},
      { text: "Build something awesome", done: true , click:'tresVisible=!tresVisible'}
    ]
  },
  methods: {
    clickMethod(todo){
      console.log(todo.click)
      todo.click()
    }
  }
})

Fiddle

Answer 1

Вместо использования строк в качестве функций (что потребует eval()), вы можете определить выражения функций :

new Vue({
  el: "#app",
  data: (vm) => ({
    infoVisible:false,
    tresVisible:true,
    todos: [
      { ..., click() { vm.infoVisible = !vm.infoVisible } },
      { ..., click() { vm.infoVisible = !vm.infoVisible } },
      { ..., click() { vm.infoVisible = !vm.infoVisible } },
      { ..., click() { vm.tresVisible = !vm.tresVisible } },
    ]
  }),
  methods: {
    clickMethod(todo){
      todo.click()
    }
  }
})

Шаги:

1. В todos[] измените тип свойств .click со строк на выражения функций:

   //click: 'infoVisible = !infoVisible'  // from strings
   click() { infoVisible = !infoVisible } // to function expressions (to be updated in step 3)
   

2. В теле функции требуется ссылка на экземпляр Vue, чтобы click() мог изменять свойства данных (т. Е. infoVisible и tresVisible). Обновите свойство data объявления Vue, чтобы оно стало функцией, принимающей аргумент (аргументом будет сам экземпляр Vue):

   data: (vm) => ({/* ... */})
   

3. Обновите click(), чтобы использовать этот аргумент для ссылки на свойства целевых данных:

   click() { vm.infoVisible = !vm.infoVisible }
             ^^^               ^^^
   

обновленная скрипка

Answer 2

eval (todo.click) будет работать, но вам нужно добавить «это».ко всем свойствам todo в атрибутах click, чтобы они имели правильный контекст, то есть контекст экземпляра Vue.

new Vue({
  el: "#app",
  data: {
    infoVisible:false,
    tresVisible:true,
    todos: [
      { text: "Learn JavaScript", done: false, click:'this.infoVisible=!this.infoVisible' },
      { text: "Learn Vue", done: false, click:'this.infoVisible=!this.infoVisible' },
      { text: "Play around in JSFiddle", done: true , click:'this.infoVisible=!this.infoVisible'},
      { text: "Build something awesome", done: true , click:'this.tresVisible=!this.tresVisible'},

    ]
  },
  methods: {
    clickMethod(todo){
          eval(todo.click)
        }
  }
})