Question

所以我有一个小的Vue.js项目，显示6个“Ninjas”对象，当我点击按钮切换时，它想要切换“忍者的专长”：

<template>
  <div id="ninjas">
  <ul>
    <li v-for="x in ninjas">
      <h1>{{x.name}}</h1>
      <h2 v-show="x.show">{{x.speciality}}</h2>
      <button v-on:click="toggle(x.show)">Toggle</button>
    </li>
  </ul>
  </div>
</template>

<script>
    export default {
        name: "main",
      data() {
          return {
            ninjas: [
              {name: 'Ryu', speciality: 'Vue Components', show: false},
              {name: 'Crystal', speciality: 'HTML Wizardry', show: false},
              {name: 'Hitoshi', speciality: 'Click Events', show: false},
              {name: 'Tango', speciality: 'Conditionals', show: false},
              {name: 'Kami', speciality: 'Webpack', show: false},
              {name: 'Yoshi', speciality: 'Data Diggin', show: false}
            ]
          }
      },
      methods: {
          toggle: function (n) {
            console.log(n);
            if(n===true) n=false;
            else if(n===false) n=true;
            console.log(n);
          }
      }
    }
</script>

<style scoped>

</style>

问题是切换功能无法正常工作，因为当我点击按钮时它不是给定对象的show属性（第一个日志是false然后它变为true但是当我再次运行它时show属性尚未更改为true，它再次为false。

但是，当我从中更改代码时：

<button v-on:click="toggle(x.show)">Toggle</button>

对此：

<button v-on:click="toggle(x)">Toggle</button>

当我将切换方法更改为：

toggle: function (n) {
            console.log(n);
            if(n.show===true) n.show=false;
            else if(n.show===false) n.show=true;
            console.log(n);
          }

该程序正常运行。

任何人都可以向我解释为什么它第一次不起作用而第二次起作用了吗？

谢谢！

Answer 1

我认为一种可能简化你的目标的方法是这样的：

data() {
  return {
    ninjas: //...,
    activeNinja: 0
  }
},
methods: {
  toggleNinja(index) {
    this.activeNinja = index
  }
}

现在在for循环中捕获index：

<li v-for="(x, index) in ninjas">

并按下按钮点击索引：

<button v-on:click="toggleNinja(index)">Toggle</button>

并更新您的show元素以观察activeNinja属性：

<h2 v-show="activeNinja === index">{{x.speciality}}</h2>

现在没有理由使用show属性污染您的对象。

在函数中传递时，Vue数据不会更改

1 个答案: