Vue 데이터 모델 속성 기반 속성 이름의 값을 가져오시겠습니까?

Vue 데이터 모델 속성 기반 속성 이름의 값을 가져오시겠습니까?

예를 들어 다음과 같은 div가 있고, 제 목표는 css 클래스를 vue 데이터 모델 속성의 이름을 기반으로 계산된 클래스의 문자열로 설정하는 것입니다.getClassText방법:

 <div :class="getClassText('lastName')">

이 Javascript를 사용하여:

 new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: ''
        },
        methods: {
            getClassText: function (fieldName) {
                var valueOfField = NeedHelpHere(fieldName);
                //some complex calculations based on the valueOfFild
                return resultOfComplexCalculations;

            }
        }
    });

내부NeedHelpHere(fieldName)메서드 Vue 데이터 모델 속성 기반 속성 이름의 값을 반환할 수 있어야 합니다.Vue로 어떻게 할 수 있을까요?

주의: 성(姓)에 대한 견적 없이 메서드를 호출할 수 있으며, 이로 인해 자산 값이 전달됩니다.

<div :class="getClassText(lastName)">

그러나 Vue를 더 잘 이해하기 위해 속성 이름을 전달하는 메서드를 다음과 같은 문자열로 호출하는 방법을 알고 싶습니다.

<div :class="getClassText('lastName')">

그런 접근으로 내부에서는NeedHelpHere(fieldName)메서드 Vue 데이터 모델 속성 기반 속성 이름의 값을 반환할 수 있어야 합니다.Vue로 어떻게 할 수 있을까요?

패스값을 직접 받고 싶지 않은 경우 다음과 같이 할 수 있습니다.

HTML:

  <div id="app">

    <div :class="getClassText('lastName')">fooo</div>

  </div>

JS 부품:

 new Vue({
        el: '#app',
        data: {
            firstName: '',
            lastName: 'my-class'
        },
        methods: {
            getClassText: function (fieldName) {
              if (this.$data.hasOwnProperty(fieldName)) {
                return this.$data[fieldName]
              }
              return
            }

        }
    });

데모: http://jsbin.com/rutavewini/edit?html,js,output

언급URL : https://stackoverflow.com/questions/43506567/get-value-of-vue-data-model-property-based-property-name