如何在select vue.js中获得SPECIFC选择？

Question

你好吗？ 我正在研究Vue，并且我不知道该去哪里的当前任务。 我有一个选择，当我单击时，我需要在屏幕上显示与该选择相对应的内容。例如，将“待办事项”选项放在选择中时，只有结论= false的任务才能出现在屏幕上。我只走了这么远，我需要帮助才能继续。你能帮助我吗？谢谢

这是我的应用

<template>
  <div id="app">
    <h1>Lista de Tarefas</h1>
    <List :data="list" @remove="handleRemove"/>
    <Form @add="addNewTask" @onChange="handleN"/>
  </div>
</template>

<script>
import List from "./components/List.vue";
import Form from "./components/Form.vue";

export default {
  components: {
    List,
    Form,
  },
  data() {
    return {
      list: [],
    };
  },
  methods: {
    addNewTask(newTask) {
      this.list.push(newTask);
    },
    handleRemove(item) {
      const index = this.list.findIndex(i => i.id === item.id)
      this.list[index].excluded = true
    },
    handleN(item) {
      const index = this.list.findIndex(i => i.id === item.id)
      this.list[index].concluded = true
    }
  },
};
</script>

这是我的列表。

<template>
  <ul>
    <select v-model="selected" @change="onChange($event)">
      <option disabled value="">Escolha a visualização</option>
      <option v-for="option in options" :key="option.text">
        {{ option.text }}
      </option>
    </select>

    <li v-for="item in itens" :key="item.id">
      <input type="checkbox" id="checkbox" v-model="item.concluded" />
      <label for="checkbox"> {{ item.description }} </label>
      <button @click="() => $emit('remove', item)">Excluir</button>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => {},
    },
  },
  data() {
    return {
      selected: "",
      options: [
        { text: "Todos", value: "1" },
        { text: "A fazer", value: "2" },
        { text: "Concluído", value: "3" },
        { text: "Deletado", value: "4" },
      ],
    };
  },
  computed: {
    itens() {
      return this.data.filter((item) => item.excluded === false);
    },
  },
  methods: {
    onChange(event) {
      console.log(event.target.value);
      return this.data.filter((item) => item.concluded === false);
    },
  },
};
</script>

这是我的形式。

<template>
  <form @submit.prevent="handleNewTask">
    <input type="text" v-model="newTask" placeholder="Insira a tarefa"/>
    <input type="submit" value="Adicionar"/>
  </form>
</template>

<script>
import Task from '../types/Task.js'

export default {
  data() {
    return {
      newTask: "",
    };
  },
  methods: {
      handleNewTask() {
          this.$emit('add', new Task(this.newTask))
          this.newTask = ''
      }
  },
};
</script>

这是我的任务。

export default class {
    constructor(description) {
        this.description = description,
        this.id = Math.random(),
        this.concluded = false,
        this.excluded = false
    }
}

我看一些教程，阅读文档和一些堆叠的问题，但我真的无法离开这里 事先感谢您的帮助

Answer 1

基于您如何构建应用程序，我们唯一关注的问题应该是list.vue文件。

您的目标是根据选择（SELECTION属性）过滤结果。但是，您的问题是您甚至在任何地方都没有使用它。

我知道您在onChange方法上硬编码过滤器，但这首先是错误的，因为您并没有真正更改任何内容（您正在返回数组），其次它效率低下。

一种更好的方法是像这样更新计算的itens函数：

itens() {
  return this.data.filter((item) => {
    if (this.selected === '1'){
      return item.concluded === false
    } else if (this.selected === '2'){
      // filter another way
    } else if (... // so on and so forth
  });
},

另外，在将它们发送到组件之前，我会过滤排除的项目。如果您不使用它，请不要发送。

删除onChange在＆lt; select＆gt;和关联方法上的事件，因为它们现在未使用。