时间戳

首页 > 解决方案 > 如何在 Vue JS 中切换内容，将字符串传递给数据

javascript - 如何在 Vue JS 中切换内容，将字符串传递给数据

问题描述

我正在尝试一个简单的切换功能，它需要一分钟才能在 vanilla js 中创建，但不知何故我在 vue 中陷入了困境。如何解决以下问题，传递一个应该是需要访问的已创建 var 的字符串。

    <div @click="showData('data1')">click</div>
    <div @click="showData('data2')">click</div>
    <div @click="showData('data3')">click</div>
    <div v-show="data1">Show data 1</div>
    <div v-show="data2">Show data 2</div>
    <div v-show="data3">Show data 3</div>

data() {
    data1 : false,
    data2 : false,
    data3 : false
}


showData(curData) {

    this.data1 = false;
    this.data2 = false;
    this.data3 = false;

    this.[curData] = !this.[curData];

}

标签： javascriptvue.js

解决方案

您的代码有 2 个问题。首先是这一行this.[curData] = !this.curData;，其中获取传递的数据变量的语法错误也会this.curData给出未定义的错误，因为 curData 变量不存在。其次是将所有值重置为 false 而不保存当前单击元素的值以进行切换。尝试以下

showData(curData) {
  const value = !this[curData];
 
  this.data1 = false;
  this.data2 = false;
  this.data3 = false;

  this[curData] = value;
}

推荐阅读