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

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

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

Answer 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)"（在我的propertyName中已声明v-for的地方）传递名称，然后使用以下方法：

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

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

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

2 个答案: