如何使用作为对象名称传递的参数从函数访问数据对象答案

【问题标题】：how to access the data object from the function using parameter passed as object name如何使用作为对象名称传递的参数从函数访问数据对象
【发布时间】：2019-10-28 21:30:19
【问题描述】：

我想从方法中访问数据对象并修改数据对象内部的值，我要访问的对象的名称来自函数参数

模板

<tbody>
   <td>B</td>
   <td>High Kick Fwd</td>
   <td>{{kal.totalPoints}}</td>
   <template v-for="elements in kal">
      <td
      v-for="item in elements"
      :key="elements[item]"
      @click="universalfunction(kal)" // passing the object 
      :class="{red:item.mistake,green:!item.mistake}"
      class="workingElemments"
      >{{item.Marks}}</td>
   </template>
   <td>{{parseFloat(kal.markObtain).toFixed(2)}}</td>
</tbody>

data: function() {
    return {
        kal: {
            elements: {
            below90: { mistake: false, Marks: 0.4 },
            bodyPosition: { mistake: false, Marks: 0.2 },
            toeFlex: { mistake: false, Marks: 0.1 },
            Hezitation: { mistake: false, Marks: 0.1 }
        },
        totalPoints: 1,
        markObtain: 1.0
    }
}

universalfunction: function(pObject) {
    this.pObject.elements.mistake = true; //error: cannot access the elements of undefined 
}

我想要的是函数应该根据参数名称访问数据对象并修改原始对象

【问题讨论】：

删除this。

标签： javascript typescript ecmascript-6 vuejs2 vuex

【解决方案1】：

pObject 不是 this 对象的属性 - 它已作为参数传递给 universalfunction 函数。

universalfunction: function(pObject) {
    this.pObject.elements.mistake = true;
}

【讨论】：

【解决方案2】：

我对你想要达到的目标做了一些假设，但我认为你正在寻找这样的东西：

new Vue({
  el: '#app',
  data: {
    kal: {
      elements: {
        below90: {
          mistake: false,
          Marks: 0.4
        },
        bodyPosition: {
          mistake: false,
          Marks: 0.2
        },
        toeFlex: {
          mistake: false,
          Marks: 0.1
        },
        Hezitation: {
          mistake: false,
          Marks: 0.1
        }
      },
      totalPoints: 1,
      markObtain: 1.0
    }
  },
  methods: {
    universalFunction (item) {
      item.mistake = !item.mistake;
    }
  }
});

td {
  border: 1px solid black;
  padding: 10px;
}

.red {
  color: red;
}

.green {
  color: green;
}

.workingElements {
  background-color: #eee;
  cursor: pointer;
}

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<div id="app">
  <table>
    <tbody>
      <tr>
        <td>B</td>
        <td>High Kick Fwd</td>
        <td>{{ kal.totalPoints }}</td>
        <td
          v-for="(item, propertyName) in kal.elements"
          :key="propertyName"
          :class="item.mistake ? 'red': 'green'"
          class="workingElements"
          @click="universalFunction(item)"
        >
          {{item.Marks}}
        </td>
        <td>{{ kal.markObtain.toFixed(2) }}</td>
      </tr>
    </tbody>
  </table>
</div>

我删除了其中一个循环，因为它似乎对您拥有的数据没有意义。在外部对象上循环导致在表中创建两个不必要的空单元格。相反，我只是在 elements 上循环，并在单击时将相关项传递给方法。

另一种方法是使用@click="universalFunction(propertyName)"（我在v-for 中声明propertyName）传递名称，然后将方法设为：

universalFunction (name) {
  this.kal.elements[name].mistake = true;
}

我个人建议使用数组而不是对象来存储elements。

【讨论】：