как получить доступ к объекту данных из функции, используя параметр, переданный как имя объекта

Question

Я хочу получить доступ к объекту данных из методов и изменить значения внутри объекта данных, имя объекта, к которому я хочу получить доступ, происходит из параметра функции

шаблон

<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 
}

я хочу, чтобы функция получала доступ к объекту данных в соответствии с именем параметра и изменяла исходный объект

Answer 1

Я сделал несколько предположений о том, чего вы пытаетесь достичь, но я думаю, что вы ищете что-то вроде этого:

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)" (где я объявил propertyName в моем v-for), а затем метод:

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

Лично я бы рекомендовал использовать массив, а не объект для хранения elements.

Answer 2

pObject не является свойством объекта this - оно передано в качестве параметра функции universalfunction.

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