Как передать в props не строку, а выражение в Vue.js? Есть два компонента, todo.vue и item.vue. item.vue локально импортится в todo.vue и используется 2 раза, все одинаково кроме атрибута v-show. в одном случае нужно передать task.complete, а во втором !task.complete. Я понял как через props передать строку, а можно ли передать именно js выражение?
Вот код todo.vue
// Сюда нужно передать !task.complete

// Сюда нужно передать task.complete

А вот код item.vue

// Здесь, в атрибут v-show должно передаваться, в зависимости от переданного свойства в компоненте, либо !task.complete либо task.complete

{{task.name}}

Предыдущий
вопрос Следующий
вопрос

Вы можете передать выражение в props, используя вычисляемое свойство в родительском компоненте todo.vue. В данном случае, вы можете создать вычисляемое свойство, которое будет возвращать либо true, либо false, в зависимости от текущего tab'а, и передавать его как props в дочерний компонент item.vue.

Пример:

todo.vue:

<template>
<div>
<ui-tab title="Pending">
<list-item :showCompleted="false"></list-item>
</ui-tab>
<ui-tab title="Complete">
<list-item :showCompleted="true"></list-item>
</ui-tab>
</div>
</template>
<script>
export default {
data() {
return {
tasks: [
{ name: 'Task 1', complete: false },
{ name: 'Task 2', complete: true },
// Добавьте остальные задачи
]
}
}
}
</script>

item.vue:

<template>
<ul class="tasks">
<li v-for="task in tasks">
<label @click='markTask' v-show="showCompleted ? task.complete : !task.complete" class="task-label">
<ui-checkbox v-model="task.complete" class="task__checkbox">{{task.name}}</ui-checkbox>
</label>
</li>
</ul>
</template>
<script>
export default {
props: ['showCompleted', 'tasks'] // Принимаем showCompleted как props
}
</script>

Таким образом, вы передаете логическое значение (true или false) в зависимости от текущего tab'а из todo.vue в item.vue как props, и используете его в качестве условия для v-show внутри цикла v-for.