Как передать в props не строку, а выражение в Vue.js?

Question

[artekha]

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

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

А вот код item.vue

<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

[Ivan Bogachev]

artekha , Дмитрий Беляев совершенно правильно вам намекает на computed. Опишу подробнее: у вас есть "список всех задач". А вам нужно получить "список выполненных задач" и "список невыполненных". Вы берете и делаете следующее (все это для примера):

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

а потом используете эти самые completedTasks и 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>

Вот вам codepen для наглядности.

Comments

[artekha]

Я от такой реализации отказался из-за keen-ui. Там чекбокс ведет себя странно, при mouseup срабатывает на следующем чекбоксе. Так что нужно именно передать v-show для каждого label

[rmaksim]

artekha: нашли решение иль все еще нужна помощь?

Answer 2

[Дмитрий Беляев]

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

Comments

[artekha]

И где там решение моей проблемы?