如何在标题搜索输入为空时再次可视化初始数组?

huangapple go评论67阅读模式
英文:

How to visualize the initial array when search input by title is empty again?

问题

以下是您要翻译的内容:

"After searching in the input field a todo item by title, and than making the search input empty I'm expecting to get rendered the initial array of todos once again. I tryed to achieve it with if statement but it doesn't work and only the searched before todo item is only rendered, not the initial list of todos. I'm not sure that the if statement is the best approach."

链接:https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-bkwixg?file=pages%2Findex.vue,store%2Findex.js,components%2FTask.vue


// Child component


// Store

export const state = () => ({
tasks: [],
});

export const actions = {
async getTasks(context) {
const res = await fetch('https://dummyjson.com/todos/user/5');
if (res.ok) {
let result = await res.json();
context.commit('setTasks', result.todos);
}
return res.ok;
},
};

export const mutations = {
setTasks(state, data) {
state.tasks = data;
},
searchTask(state, search) {
if (search) {
state.tasks = state.tasks.filter((t) => {
return t.todo.toLowerCase().includes(search.toLowerCase());
});
} else if (search === '') {
return state.tasks;
}
},
};

export const getters = {
getTasks(state) {
return state.tasks;
},
};

英文:

After searching in the input field a todo item by title, and than making the search input empty I'm expecting to get rendered the initial array of todos once again. I tryed to achieve it with if statement but it doesn't work and only the searched before todo item is only rendered, not the initial list of todos. I'm not sure that the if statement is the best approach.

https://stackblitz.com/edit/nuxt-bootstrap-vue-dynamic-img-bkwixg?file=pages%2Findex.vue,store%2Findex.js,components%2FTask.vue

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

// Child component

&lt;template&gt;
      &lt;input
        type=&quot;text&quot;
        v-model=&quot;search&quot;
        @keypress.enter=&quot;searchTask&quot;
        placeholder=&quot;search task&quot;
      /&gt;
      &lt;button @click=&quot;searchTask&quot; class=&quot;btn&quot;&gt;Search&lt;/button&gt;
      &lt;Task v-for=&quot;task in tasks&quot; :key=&quot;task.id&quot; :task=&quot;task&quot; /&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
  computed: {
    tasks() {
      return this.$store.getters.getTasks;
    },
  },
  mounted() {
    this.$store.dispatch(&#39;getTasks&#39;).then((data) =&gt; console.log(this.tasks));
  },
  methods: {
    searchTask() {
      let search = this.search;
      this.$store.commit(&#39;searchTask&#39;, search);
    },
  },
};
&lt;/script&gt;

// Store 

export const state = () =&gt; ({
  tasks: [],
});

export const actions = {
  async getTasks(context) {
    const res = await fetch(&#39;https://dummyjson.com/todos/user/5&#39;);
    if (res.ok) {
      let result = await res.json();
      context.commit(&#39;setTasks&#39;, result.todos);
    }
    return res.ok;
  },

export const mutations = {
  setTasks(state, data) {
    state.tasks = data;
  },
  searchTask(state, search) {
    if (search) {
      state.tasks = state.tasks.filter((t) =&gt; {
        return t.todo.toLowerCase().includes(search.toLowerCase());
      });
    } else if (search === &#39;&#39;) {
      return state.tasks;
    }
  },
};

export const getters = {
  getTasks(state) {
    return state.tasks;
  },
};

<!-- end snippet -->

答案1

得分: 0

你不应该改变原始状态,相反,你可以使用方法风格访问来定义一个getter:

export const state = () => ({
  tasks: [],
});

export const actions = {
  async getTasks(context) {
    const res = await fetch('https://dummyjson.com/todos/user/5');
    if (res.ok) {
      let result = await res.json();
      context.commit('setTasks', result.todos);
    }
    return res.ok;
  },
};

export const mutations = {
  setTasks(state, data) {
    state.tasks = data;
  },
};

export const getters = {
  getTasks: (state) => (search) => {
    if (search) {
      return state.tasks.filter((t) => {
        return t.todo.toLowerCase().includes(search.toLowerCase());
      });
    } else if (search === '') {
      return state.tasks;
    }
  },
};

你应该这样调用它:

computed: {
    tasks() {
      return this.$store.getters.getTasks(this.search);
    },
  },
英文:

You shouldn't mutate the original state, instead, you can define a getter with method style access :

export const state = () =&gt; ({
  tasks: [],
});

export const actions = {
  async getTasks(context) {
    const res = await fetch(&#39;https://dummyjson.com/todos/user/5&#39;);
    if (res.ok) {
      let result = await res.json();
      context.commit(&#39;setTasks&#39;, result.todos);
    }
    return res.ok;
  },

export const mutations = {
  setTasks(state, data) {
    state.tasks = data;
  },
};

export const getters = {
  getTasks:(state) =&gt; (search) =&gt; {
   if (search) {
      return state.tasks.filter((t) =&gt; {
        return t.todo.toLowerCase().includes(search.toLowerCase());
      });
    } else if (search === &#39;&#39;) {
      return state.tasks;
    }
  }
};

You should call it like :

computed: {
    tasks() {
      return this.$store.getters.getTasks(this.search);
    },
  },

huangapple
  • 本文由 发表于 2023年5月6日 23:50:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76189798.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定