vuejs-列表 - 如何通过单击函数为字符串

Question

我都有一个对象，每个对象都带有一个传递给 click -event处理程序的 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()
    }
  }
})

小提琴

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）。将VUE声明的data属性更新为参数的函数（参数将是VUE实例本身）：

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

3. 更新click()用于使用该参数来引用目标数据属性：

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

更新了小提琴

Answer 2

eval（todo.click）将起作用，但您需要添加"此"。对于点击属性中的所有todo属性，因此它们具有正确的上下文，即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)
        }
  }
})