Enable/Disable Button based on selected value - vue.js

Question

I have a button in my view
<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">
my data looks like
<script>
export default {
data: () => ({
selected: [],
items: [
{ title: 'Delete',disabled:false},
],
...
i am trying to enable or disable the v-list-tile based on whether the selected array has any values.
i tried something like:
items: [
{ title: 'Delete',disabled:this.selected.length=0},
],
but it gives me the following error:
[Vue warn]: Property or method "selected" is not defined on the instance but referenced during render.
please help me to resolve this issue.

Answer 1

I would say rather than have a disabled property on your model, you can have it as a computed property like so:
computed: {
disabled() {
return this.selected.length < 1; // or === 0
}
}
Then use the disabled property in your component.
<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)