동적 부울 속성을 VueJS 구성 요소로 전달

동적 부울 속성을 VueJS 구성 요소로 전달

Vuetify를 사용하여 VueJS 구성 요소에 동적 속성을 연결하는 방법JS?

나는 다음과 같은 Vuetify가 있다.선택 필드 요소를 만드는 JS 코드 예제:

<div id="app">
  <v-app id="inspire" style="padding: 10px; ">
    <v-select 
      v-model="selectField"
      :items="items" 
      multiple attach chips>  
    </v-select>
  </v-app>
</div>

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      selectField: '', 
      items: [
        'item1', 
        'item2', 
        'item3'
      ],
      booleanProperties: [
        'multiple', 
        'attach', 
        'chips'
      ]
    }
  },
})

이렇게 하면 기능적인 Vuetify가 생성됨JS 선택 구성요소, 그러나 부울 소품 전달 방법을 알고 싶다.multiple, attach, chips구성 요소 선언에 명시적으로 지정하지 않아도 되도록 데이터 속성으로 선택 요소.

예를 들면 다음과 같다.소품 추가:multiple, attach, chips데이터 배열 요소 내에 정의됨booleanProperties구성요소를 지정하지 않고도 구성요소를 정의할 수 있는 동안.이 방법은 내가 지나가는 어떤 소품에도 역동적으로 작용한다.

다음의 유사음반 예시와 비슷한 것.

<v-select 
    v-model="selectField"
    :items="items"
    v-for="(booleanProperties) as boolProp">         
</v-select>

데이터 소품을 전달/지정하는 방법:multiple, attach, chips동적으로v-select원소?

여기 내가 언급하고 있는 것의 암호 예가 있다.https://codepen.io/deftonez4me/pen/NWRLWKE

간단히 사용할 수 있다.v-bind키/시퀀스를 지정하지 않고, 그 안에 객체를 전달한다.v-bind="additionalProps". 의 VueJS v2 설명서에 따라:

인수 없이 사용할 경우 속성 이름-값 쌍을 포함하는 개체를 바인딩하는 데 사용할 수 있다.

또한 병합할 수 있다.items에 의해 반환된 물건에 대한 구속력.additionalProps그럼 간결하게.코드 기반 예제.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data () {
    return {
      selectField: '', 
      additionalProps: {
        items: [
          'item1', 
          'item2', 
          'item3'
        ],
        multiple: true,
        attach: true,
        chips: true
      }
    }
  }
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.16/vuetify.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/2.3.16/vuetify.min.js"></script>
<div id="app">
  <v-app id="inspire" style="padding: 10px; ">
    <v-select 
      v-model="selectField"
      v-bind="additionalProps">  
    </v-select>
  </v-app>
</div>

다음과 같이 간단히 할 수 있다.

<div id="app">
  <v-app id="inspire" style="padding: 10px; ">
    <v-select 
      v-model="selectField"
      :items="items" 
      :multiple="multiple"
      :attach="attach"
      :chips="chips">  
    </v-select>
  </v-app>
</div>

그런 다음 소품을 이전과 같이 선언할 수 있다.

  props: [
    'multiple', 
    'attach', 
    'chips'
  ]

또는 다음과 같이 좀 더 구체적으로 설명하십시오.

props: {
        multiple: {
          type: Boolean
        },
        attach: {
          type: Boolean
        },
        chips: {
          type: Boolean
        }
}

참조URL: https://stackoverflow.com/questions/65651725/passing-dynamic-boolean-props-to-a-vuejs-component