У меня есть кнопка в моем представлении
<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.
пожалуйста, помогите мне решить эту проблему.
Я бы сказал, что вместо того, чтобы иметь свойство 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: that props is passed into your
v-list-tile
as disabled property of that element. I am not sure if a custom component will be disabled (otherwise you know you'll use it on a real html element)
Вычисляемая собственность может быть идеальной в этой ситуации ...