Vuetify에서 리터럴 값을 사용하지 않도록 설정하는 방법

Vuetify에서 리터럴 값을 사용하지 않도록 설정하는 방법

v-select 구성 요소의 "항목 사용 안 함" 프로펠러를 vuetify에서 사용할 때 문제가 발생함.나는 이것을 문자 그대로 사용하려고 한다.

다음은 이 문제를 재현하는 코드 조각이다.

이 예에서는 "Buzz" 옵션을 비활성화하고자 한다.

Vue.use(Vuetify)

new Vue({
  el: '#app',
  data: () => ({
    items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
    disabledItems: ['Buzz'],
  })
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.5.14/vuetify.min.js"></script>

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-xl>
      <v-layout wrap align-center>
        <v-flex xs12 sm6 d-flex>
          <v-select :items="items" :item-disabled="disabledItems" box label="Box style"></v-select>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

<v-select :items="items" :item-disabled="disabledItems"></v-select>
...
items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
disabledItems: ['Buzz'],

나는 이 예에서와 같이 비파생적 키-값 쌍을 사용할 수 있다는 것을 확실히 알고 있다: https://codepen.io/anon/pen/joyoaj 그리고 그것은 효과가 있을 것이다.그러나 나는 이 문제를 해결하기 위해 리터럴 옵션을 키 값으로 변환하기 위해 래퍼 구성요소를 작성할 필요는 없다.

<v-select :items="items"></v-select>
...
items: [
  {text: 'Foo', value: 'Foo'}, 
  {text: 'Bar', value: 'Bar'}, 
  {text: 'Fizz', value: 'Fizz'}, 
  {text: 'Buzz', value: 'Buzz', disabled: true},
],

리터럴 값을 비활성화하는 방법을 아는 사람?

너는 그렇게 할 수 없다 왜냐하면item-disabled재산은 사실 다른 것을 위한 것이다.

원본 문서:

item-disabled
기본값:disabled
유형: 문자열 | 배열 | 함수

항목의 비활성화 값 속성 설정

그렇게item-disabled개체에서 "사용 안 함 필드"로 간주할 필드를 지정하십시오.기본적으로 해당 필드는disabled.

없는item-disabled다음과 같은 물체가 있을 수 있다.

items: [
  {text: 'Foo', value: 'Foo'}, 
  {text: 'Buzz', value: 'Buzz', disabled: true},
],

그리고 물체가 다른 "사용 불가능-속성"을 가지고 있는 경우(예:customDisabled그런 다음 사용item-disabled이렇게 받침하다:

 <v-select :items="items" item-disabled="customDisabled"

// ...
items: [
  {text: 'Foo', value: 'Foo'}, 
  {text: 'Buzz', value: 'Buzz', customDisabled: true},
],

코데펜

문자열 배열을 보존해야 하는 경우 항목을 개체 배열에 매핑하여 전달하십시오.

<v-select :items="computedItems"
// ...
data: () => ({
  items: ['Foo', 'Bar', 'Fizz', 'Buzz'],
  disabledItems: ['Buzz'],
}), 
computed: {
  computedItems() {
    return this.items.map(item => {
      return {
        text: item, 
        disabled: this.disabledItems.includes(item)
      }
    })
  }
}

코데펜

---

또한 다음과 같이 비활성화된 필드가 중첩된 경우 배열을 통과하여 원하는 깊이에 도달할 수 있다.

:item-disabled="['meta', 'disabled']"
// ...
{
  text: item, 
  meta: {
    disabled: true 
  }
}

항목별 기능 확인을 통한 실제 작동 최소 예제.

<v-select
  :items="items"
  item-text="name"
  item-value="id"
  :item-disabled="checkIsItemDisabled"
/>

<script>
  data: function(){
    return {
      items: [
        {id: 1, name: 'Foo'},
        {id: 2, name: 'Bar'},
      ],
    },
    methods: {
      checkIsItemDisabled(item) {
        return (item.id === 1)
      },
    }
  },
</script>

@Traco의 대답에 기능 옵션 추가:

<v-select :items="items" item-disabled="disableItem">
...
methods: {
  disableItem(item) {
    if (item.prop === this.anyOtherPropValue) {
      return true;
    }
    return false;
  },
},

이 경우 예(Yes)가 반응함.OtherPropValue 변경 사항

참조URL: https://stackoverflow.com/questions/56151522/how-can-i-disable-literal-values-in-vuetify