javascript - 是否可以添加在 Vue 中存储一些数据的 HTML 元素？

问题描述

例如，我需要在 an 中显示数组元素，<ul>每个元素都应该以 . 开头<li>和结尾</li>。那是我写的代码，但它根本不起作用：

clearedtaskslist: function(){
this.template='<ul>'      
for(let i=0;i<this.archive.length;i++)
{
  this.template+= '<li>' + this.archive[i].task '</li>'
}
this.template+='</ul>'
}

是否可以在 vue 中做类似的事情？

编辑

我需要通过各种事件显示数据，我尝试使用 v-for 但只有最后一个事件会打印数据。例如，在我的应用程序中，我必须在下面的部分显示已完成的任务和完成任务的用户，因此每次有人触发相关事件时我都需要显示这 2 个数据

clearedtaskslist: function(){
      
for(let i=0;i<this.archive.length;i++)
{
  this.template += 'Task:  ' + this.archive[i].task 
  this.template +=  ' user: ' + this.archive[i].taskuserID + '----||----'
}

}

这就是我获取数据的方式（我知道字符串连接太可怕了），然后我应该在每个循环中换行（我不知道该怎么做）

<div style="margin: 0 auto; margin-top: 25px;" class="w-50">
   <h5 v-if="archive.length>0"><i>Completed tasks</i></h5>
  <div style="margin:0 auto;"> <p>{{template}}</p> </div>
</div>

这就是显示数据的地方

所以关键是可以在没有可怕的字符串连接的情况下正确设置这些数据的样式，有没有办法用 vue 做到这一点？

标签： javascriptvue.js

解决方案

有了一些假设，我写了一个与您类似的场景示例。当然，您需要根据您的需要对其进行调整，因为我并不完全了解您的应用程序的范围。

<template>
  <div class="hello">
    <div class="buttons">
      <button
        v-for="(user, index) of getUniqueUsers"
        :key="user+index"
        @click="selectedUser=user"
      >User: {{user}}</button>
    </div>
    <ul v-if="selectedUser">
      <li
        v-for="(task, index) of archive.filter((user) => user.taskuserID==selectedUser)"
        :key="task+index"
      >
        <p>User: {{task.taskuserID}}</p>
        <p>Task: {{task.task}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      selectedUser: null,
      archive: [
        {
          taskuserID: "1",
          task: "task1"
        },
        {
          taskuserID: "2",
          task: "task3"
        },
        {
          taskuserID: "1",
          task: "task3"
        },
        {
          taskuserID: "4",
          task: "task4"
        },
        {
          taskuserID: "5",
          task: "task1"
        }
      ]
    };
  },
  computed: {
    getUniqueUsers() {
      const uniqueUsers = [
        ...new Set(this.archive.map(user => user.taskuserID))
      ];
      return uniqueUsers;
    }
  }
};
</script>

<style scoped>
.buttons {
  display: flex;
  justify-content: space-around;
}
</style>

在我的示例中，我使用了一个示例存档数据属性，它是array of objects我存储taskuserID 和task.
我使用属性从存档 computed中获取唯一的。taskuserIDarray
基于return来自computed属性的值（排序array），我遍历了唯一用户，v-for以便为每个用户创建一个按钮。
当您按下按钮时，在下面的循环中，它将taskuserID在列表中显示该特定人员完成的所有任务。我使用v-for了selectedUser数据属性来跟踪已选择的用户。基于该值，我过滤存档array以显示所选用户的所有相关任务。

工作示例

javascript - 是否可以添加在 Vue 中存储一些数据的 HTML 元素？

问题描述

解决方案

推荐阅读