How to pass to props not a string, but an expression in Vue.js?

Question

JavaScript

There are two components, todo.vue and item.vue. item.vue is locally imported into todo.vue and used 2 times, everything is the same except for the v-show attribute. in one case, you need to pass task.complete, and in the second !task.complete. I figured out how to pass a string through props, but is it possible to pass a js expression?
Here is the todo.vue code

<ui-tab title="Pending">
    // Сюда нужно передать !task.complete
    <list-item></list-item>
</ui-tab>
<ui-tab title="Complete">
    // Сюда нужно передать task.complete
    <list-item></list-item>
</ui-tab>

And here is the item.vue code

<ul class="tasks">
      <li v-for="task in tasks">
       // Здесь, в атрибут v-show должно передаваться, в зависимости от переданного свойства в компоненте, либо !task.complete либо task.complete
        <label @click='markTask' v-show="task.complete" class="task-label">
            <ui-checkbox v-model="task.complete" class="task__checkbox">{{task.name}}</ui-checkbox>
        </label>
      </li>
  </ul>

Answer 1

artekha , Dmitry Belyaev is absolutely right in hinting at computed. I will describe in more detail: you have a "list of all tasks". And you need to get a "list of completed tasks" and a "list of uncompleted". You take and do the following (all this is just an example):

var vm = new Vue({
    .....
    data: {
        tasks: []
    },
    computed: {
        completedTasks() {
            return _.filter(this.tasks, (task) => task.completed);
        },
        pendingTasks() {
            return _.filter(this.tasks, (task) => !task.completed);
        }
    }
    ....
})

and then use these same completedTasks and pendingTasks:

<div id='app'>
    <div>Completed:</div>
    <div v-for='task in completedTasks'>
        <span>{{ task.text }}</span>
        <input type='checkbox' v-model='task.completed'>
    </div>
    <br>
    <div>Pending:</div>
    <div v-for='task in pendingTasks'>
        <span>{{ task.text }}</span>
        <input type='checkbox' v-model='task.completed'>
    </div>
</div>

Here's a codepen for you to see.

Answer 2

https://ru.vuejs.org/v2/guide/computed.html