Кнопка включения / выключения на основе выбранного значения - PullRequest
Новая
       7

Кнопка включения / выключения на основе выбранного значения

0 голосов
/ 13 сентября 2018

У меня есть кнопка в моем представлении 

<v-menu offset-y>
  <v-btn>
    Action Items
  </v-btn>
  <v-list>
   <v-list-tile
    v-for="(item, index) in items"
    :key="index"      
   :disabled="item.disabled"
  >
   <v-list-tile-title>{{ item.title }}</v-list-tile-title>
   </v-list-tile>
  </v-list>
 </v-menu>

<v-data-table
         v-model="selected">

мои данные выглядят как 

<script>

    export default {
        data: () => ({
            selected: [],
            items: [
                { title: 'Delete',disabled:false},
            ],
...

Я пытаюсь включить или отключить v-list-tile в зависимости от того, selectedмассив имеет любые значения.

я пробовал что-то вроде: 

items: [
                { title: 'Delete',disabled:this.selected.length=0},
            ],

, но выдает следующую ошибку: 

[Vue warn]: Property or method "selected" is not defined on the instance but referenced during render.

, пожалуйста, помогите мне решить эту проблему.

1 Ответ

0 голосов
/ 13 сентября 2018

Я бы сказал, что вместо свойства disabled в вашей модели вы можете использовать его как вычисляемое свойство, например: 

computed: {
    disabled() {
        return this.selected.length < 1; // or === 0   
    }
}

Затем используйте свойство disabled в вашем компоненте. 

<v-list-tile v-for="(item, index) in items"
   :key="index"      
   :disabled="disabled">

    <v-list-tile-title>
       {{ item.title }}
    </v-list-tile-title>

</v-list-tile>

PS: этот реквизит передается в v-list-tile как отключенное свойство этого элемента. Я не уверен, что пользовательский компонент будет отключен (в противном случае вы знаете, что будете использовать его в реальном HTML-элементе)

...