Question

给出带有过滤条件的待办事项列表：

list.vue：

<script>
import TodoItem from './todo_item.vue';
export default {
  components: { TodoItem },
  props: ['selectePriority'],
  data: {
    items: [
      { name: 'Do shopping', priority: 'high' },
      { name: 'Play games', priority: 'low' }
    ]
  },
  computed: {
    selectedItems: function() {
      if(this.selectedPriority == 'all') {
        return this.items;
      } else {
        var selectedPriority = this.selectedPriority;
        return this.items.filter(function(item) {
          return item.priority == selectedPriority
        });
      }
    }
  },
}
</script>

<template>
  <div>
    <select v-model="selectedPriority">
      <option value="all">All</option>
      <option value="low">Low</option>
      <option value="high">High</option>
    </select>
    <todo-item
      v-for="item in selectedItems"
      :name="item.name"
      :priority="item.priority"
    />
  </div>
</template>

todo_item.vue：

<script>
export default {
  props: ['name', 'priority']
}
</script>
<template>
  <div>
    <p>{{ name }}</p>
    <select v-model="priority">
      <option value="low">Low</option>
      <option value="high">High</option>
    </select>
  </div>
</template>

html：

<list />

现在，例如，当过滤器设置为all时，我将Play games更改为优先级high并将过滤器更改为high，我只会看到{{1} }，因为Do shopping集合中的优先级未更新，因此已重新呈现。

从Vue.js中的子组件更新集合数据的正确方法是什么？

Answer 1

计算属性可以创建和返回过滤列表。

此示例使用lodash

data: {
  items: [
    {name: 'thing 1', value: 1000},
    {name: 'thing 2', value: 50},
    {name: 'thing 3', value: 250},
    {name: 'thing 4', value: 342},
  ],
},
computed: {
  orderedItems() {
    let items = []
    return _.orderBy(this.items, 'value', 'desc');
  },
}

要进行更新，将索引从orderedItems数组传递到“ this.items”数组。

Answer 2

我发现了一些可行的解决方案-而不是将todo-item的所有参数传递到组件中，而是传递整个对象：

    <todo-item
      v-for="item in selectedItems"
      :item="item"
    />

然后父集合中的对象会自动更新。

在Vue中这样做是一种好方法吗？

VueJS：更新其子组件收集的数据

2 个答案: