Vue 2 및 Vuex에서 전달된 프로펠러를 변수로 사용하여 오브젝트 속성에 동적으로 액세스하면 오류가 반환된다.

Vue 2 및 Vuex에서 전달된 프로펠러를 변수로 사용하여 오브젝트 속성에 동적으로 액세스하면 오류가 반환된다.

이 문제를 해결하기 위해 이미 몇 시간 동안 시도했지만 그렇게 할 수가 없어요.다음 두 가지 질문을 확인했지만 도움이 되지 않았습니다.

변수를 사용하여 객체 속성에 동적으로 액세스

변수를 사용하여 객체 속성에 동적으로 액세스

"javascript 컴파일러는 문자열 이름을 바꾸지 않지만 오브젝트 속성 이름을 바꾸므로 여기서 오류가 발생합니다."라는 @chacham15의 답변만 있을 수 있습니다.

그렇다면 어떻게 해결하면 좋을까요?

제 목표는 이 시스템에 접속하는 것입니다.this.$store.state.countries.spain.name스페인, 독일 등에 액세스 할 수 있도록 동적으로 속성을 설정합니다.난 모든 걸 다 해봤어요

this.$store.state.countries[""+name].name
this.$store.state.countries[this.name].name
this.$store.state.countries[name].name
this.$store.state.countries[`${this.name}`].name
this.$store.state.countries[`${name}`].name

또 다른 기능을 만들어봤는데name변수를 함수 내부의 const 변수에 할당하고 아무것도 할당하지 않습니다.그name변수는 문자열입니다.console.log문제없이 제대로 된 것 같아요 그래서 무슨 일이 일어나고 있는지 모르겠어요

사용할 때만 속성이 반환됩니다.this.$store.state.countries["spain"].name이 경우 자산이 존재하며 오류 없이 반환할 수 있습니다.변수를 사용하여 속성에 액세스하려고 할 때 문제가 발생합니다.

코드는 다음과 같습니다.

<template>
    <tr class="stats-row">
        <td :title="`${name}`">{{name}}</td>
        <td>{{this.$store.state.countries[this.name]}}</td>
    </tr>
</template>
        
<script lang="ts">
import Vue from 'vue';
        
export default Vue.extend({
    name: 'StatsRow',
    components: {
    },
    props: {
        name: String,
    },
});
    
</script>

다음은 부모 Vue 파일입니다.

<template>
    <div class="stats">
        <table>
            <StatsRow v-for="el in this.$store.state.countries" v-bind:key="el.name" :name="el.name"/>
        </table>
    </div>
</template>
    
<script lang="ts">
import Vue from 'vue';
import StatsRow from '@/components/StatsRow.vue';
    
export default Vue.extend({
    name: 'Stats',
        components: {
        StatsRow,
    },
});
</script>

저는 모든 요소를 부모님으로부터 소품으로 보내서 해결했습니다.

이것은 아이입니다.

<template>
  <tr class="stats-row">
    <td :title="`${name}`">{{name}}</td>
    <td>{{newCases}}</td>
    <td>{{totalCases}}</td>
    <td>{{newDeaths}}</td>
    <td>{{totalDeaths}}</td>
    <td>{{newRecovered}}</td>
    <td>{{totalRecovered}}</td>
  </tr>
</template>

다음은 부모입니다.

<template>
  <div class="stats">
    <table>
      <StatsRow v-for="el in this.$store.state.countries" v-bind:key="el.name" :active="el.active"   :name="el.name" :color="el.color" :showCases="el.showCases" :showDeaths="el.showDeaths" :newCases="el.newCases" :totalCases="el.totalCases" :newDeaths="el.newDeaths" :totalDeaths="el.totalDeaths" :newRecovered="el.newRecovered" :totalRecovered="el.totalRecovered"/>
    </table>
  </div>
</template>

언급URL : https://stackoverflow.com/questions/66291804/dynamically-access-object-property-using-passed-down-prop-as-variable-on-vue-2