Vue.js 如何在Vue中将函数变量作为数据属性访问

我有这架有三支箭的手风琴。当您单击箭头时，它应变换180度。我想要一个函数，它接受函数中设置的参数，并告诉数据属性变为零

我试过了

let vm = this;
vm.$data.arrowOne = 0;
And this[arrow] = 0,
And this.arrow = 0

它不起作用了

这是我的密码

 <div class="uk-accordion-ekstra">
  <ul uk-accordion="multiple: true">
    <li>
        <a @click="rotate(arrowOne)" class="uk-accordion-title" href="#">Headline
          <img :style="{ transform: 'rotate('+ arrowOne + 'deg)'}" src="IMGSRC"></a>

          <div class="uk-accordion-content">
            <p>TEXT</p>
        </div>
    </li>
    <li>
        <a @click="rotate(arrowTwo)" class="uk-accordion-title" href="#">Headline
          <img :style="{ transform: 'rotate('+ arrowTwo + 'deg)'}" src="IMGSRC"></a>
        <div class="uk-accordion-content">
            <p>TEXT</p>
        </div>
    </li>
    <li>
        <a @click="rotate(arrowThree)" class="uk-accordion-title" href="#">Headline
          <img :style="{ transform: 'rotate('+ arrowThree + 'deg)'}" src="IMGSRC"></a>
        <div class="uk-accordion-content">
            <p>TEXT</p>
        </div>
    </li>
  </ul>
</div>

---

我成功地用一个开关做到了这一点。但是它没有那么漂亮。我不确定我没有得到什么。因此，非常感谢您的帮助。

您遇到了结构和范围问题

您正在一个名为

arrow

的方法中引用

this.arrow

，并且您传递了一个名为

arrow

的参数-请尝试用名称进行区分，否则可能会出错

你在重复你不需要重复的东西Vue非常适合为最小的元素创建组件—您可以使用它使代码更短、更可读、更有效

下面的代码片段使一切变得更简单：

• 每个组件都有一个箭头，如果在一个位置解决旋转问题，那么它将在所有位置都得到解决，并且引用的箭头始终连接到您编辑的组件
• 您可以将箭头旋转封装到一个组件中—无需使用如此小的动画“乱扔”Vue实例
• 我添加了

  @click.prevent

  ，这类似于

  preventDefault（）

  ，因此当您单击

  {{text}}
  时不会跳转到顶部，
  数据（）{
  返回{
  轮换：0
  }
  },
  方法：{
  RotatarRow（）{
  this.rotation=！this.rotation？180:0
  }
  }
  })
  新Vue({
  el:“.uk手风琴ekstra”，
  数据：{
  手风琴项目：[{
  标题：“标题1”，
  文本：“文本1”
  },
  {
  标题:"标题2",，
  文本：“文本2”
  },
  {
  标题:"标题3",，
  文本：“文本3”
  },
  ]
  }
  });
  
  
  
  
  
  您遇到了结构和范围问题
  
  您正在一个名为
  arrow
  的方法中引用
  this.arrow
  ，并且您传递了一个名为
  arrow
  的参数-请尝试用名称进行区分，否则可能会出错
  你在重复你不需要重复的东西Vue非常适合为最小的元素创建组件—您可以使用它使代码更短、更可读、更有效
  下面的代码片段使一切变得更简单：
  
  
  每个组件都有一个箭头，如果在一个位置解决旋转问题，那么它将在所有位置都得到解决，并且引用的箭头始终连接到您编辑的组件
  您可以将箭头旋转封装到一个组件中—无需使用如此小的动画“乱扔”Vue实例
  我添加了
  @click.prevent
  ，这类似于
  preventDefault（）
  ，因此当您单击
  {{text}}
  时不会跳转到顶部，
  数据（）{
  返回{
  轮换：0
  }
  },
  方法：{
  RotatarRow（）{
  this.rotation=！this.rotation？180:0
  }
  }
  })
  新Vue({
  el:“.uk手风琴ekstra”，
  数据：{
  手风琴项目：[{
  标题：“标题1”，
  文本：“文本1”
  },
  {
  标题:"标题2",，
  文本：“文本2”
  },
  {
  标题:"标题3",，
  文本：“文本3”
  },
  ]
  }
  });
  
  
  
  
  
  很好的解决方案，喜欢三元运算符：
  this.rotation=！这是轮换吗？180:0
  @ManuelAbascal谢谢！：）我希望OP能继续，谢谢你花时间解决我的问题。它解决了这个问题，而且非常受欢迎！：-）@大师，我很高兴能帮上忙：）很好的解决方案，喜欢三元运算符：
  this.rotation=！这是轮换吗？180:0
  @ManuelAbascal谢谢！：）我希望OP能继续，谢谢你花时间解决我的问题。它解决了这个问题，而且非常受欢迎！：-）@特级大师我很高兴能帮上忙：）
   new Vue({
    el: '.uk-accordion-ekstra',
    data: { 
      arrowOne: 180,
      arrowTwo: 180,
      arrowThree: 180
    },
    methods: {
      arrow: function(arrow) {
        if(this.arrow = 0) {
          return this.arrow = 180;
        }
      }
    }
  });