Vue 컴포넌트 데이터 변수 이름에 동적으로 액세스

Vue 컴포넌트 데이터 변수 이름에 동적으로 액세스

edit: 이 예에서는 잘못된 생각이었지만, 실제 프로그램에서는 숫자가 아닌 이름(예를 들어 name_abba, name_jef, name_john)을 사용하고 있습니다.

Vue 컴포넌트에는 다음 4개의 변수가 있습니다.

name_1
name_2
name_3
number

값은 다음과 같이 인쇄됩니다.

{{ name_1 }}

변수 값을 기준으로 변수 뒤에 있는 숫자를 변경하려면 어떻게 해야 합니까?number아니면 이런 일을 할 수 있는 더 좋은 방법이 있을까요?

{{ name_{{number}} }}

를 사용합니다.$data옵션:

new Vue({
  el: "#app",
  data() {
    return {
      name_abba: 'aaa',
      name_jef: 'bbb',
      name_john: 'ccc',
      current: 'john'
    }
  }
});

<div id="app">
  {{ $data[`name_${current}`] }}
</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

변수를 루트가 아닌 객체에 배치하여 사용할 필요가 없도록 하는 것이 좋습니다.$data:

new Vue({
  el: "#app",
  data() {
    return {
      current: 'john',
      name: {
        abba: 'aaa',
        jef: 'bbb',
        john: 'ccc',
      }
    }
  }
});

<div id="app">
  {{ name[current] }}
</div>

<script src="https://unpkg.com/vue/dist/vue.min.js"></script>

어레이가 더 효율적입니다.어레이 v-for, 필터 및 찾기 메서드와 함께 사용할 수도 있습니다.또한 배열 내에서 검색하거나 이름, 분할 또는 스플라이스를 변경합니다.

<div id="app">
  {{ names[number-1] }} <!-- Result =name2. if you need name 2 array index = 1    -->
</div>

new Vue({
  el: "#app",
  data() {
    return {
      number: 2,
      names: ['name1','name2','name3'],
      }
    }
  }
});

언급URL : https://stackoverflow.com/questions/66517523/dynamically-access-vue-component-data-variable-names