vue.js - Vuejs - 列表 - 如何将点击函数作为字符串传递

Question

我有一个对象数组，每个对象都有一个 click 属性(一个字符串)，该属性被传递给一个 click 事件处理程序。我可以将 .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() 而不是将字符串用作函数(这需要 function expressions ) :

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).将 Vue 声明的 data 属性更新为一个带参数的函数(参数将是 Vue 实例本身):

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

3. 更新 click() 以使用该参数引用目标数据属性:

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

updated fiddle