根据vue js中的选项选择在不同的div中显示数据

Posted

技术标签:

【中文标题】根据vue js中的选项选择在不同的div中显示数据【英文标题】：display data in different div based on an option selection in vue js 【发布时间】：2021-06-10 18:11:39 【问题描述】：

我正在尝试使用 vue js 和元素表单制作一个待办事项应用程序。我已设法存储表单中的数据并使用 vue js 显示它，但它目前显示在所有三列中。我不知道如何在特定的 div 中显示这些项目。例如，如果用户选择选项 todo，则数据应显示在 todo 列中，如果用户选择 In progress 选项，则数据应显示在 In progress 列中。我有在很多网站上搜索过，但不幸的是，我没有找到解决方案。

另外，第二个问题是，在提交另一个表单时，div中显示的数据没有添加。它显示在已经生成的卡片中。也就是说，它应该在下次提交表单时生成新卡片。

我正在使用 vuex 来存储数据。

这是我工作过的代码：

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<head>
<title>--</title>
<style>
.main
    display: flex;
    column-gap: 5px;
    background: #e7e7e7;
    background-size: cover;
    border: 15px solid #e7e7e7;
    height: 70vh;


.heading
    background: #c2c8f1;
    width: 100%;
    text-indent: 10px;

.details
    display: flex;
    flex-direction: column;
    width: 100%;
    row-gap: 5px;


.column
    background: #d7d7d7;
    width: 100%;
    height: 100%;


.add
    border: 1px solid #0479cbf7;
    border-radius: 5px;
    color: #0479cbf7;
    align-self: center;
    margin-left: auto;
    transition: 0.3s ease-in;
    background:transparent;


.add:hover
    background: #0479cbf7;
    color: white;
    cursor: pointer;

.add:target
    border: 1px solid transparent;


.tasks
    display: flex;

.tasks h2
    margin-top: auto;

#app
    margin-left: auto;

.el-drawer__header
    padding: 20px 10px;
    background: #eaeaea;
    font-weight: bold;
    font-size: 25px;


.drawer__footer
    display: flex;
    justify-content: center;
    margin-left: 5px;
    margin-right: 5px;


.el-drawer__body>*
    text-indent: 10px;

.el-form-item__content
    display: grid;

.el-form-item__label
    text-align: start;

.drawer
    width: 45%!important;
    font-family: sans-serif;

.el-form-item
    margin-right: 20px;

.el-drawer__close-btn, #el-drawer__title
    display: none!important;

.close
    float: right;

.close:before
    content: '\00d7';
    cursor: pointer;

.el-message-box__btns
    display: flex;

.el-date-editor--date,.el-date-editor--time
    width: 100%!important;

.desc
    margin-left: 10px;
    margin-right: 10px; 

.el-textarea__inner
    min-height: 100px!important;

.card
    background:white;
    border-left: 3px solid #00ca00;
    padding-left: 10px;
    width:  80%;
    margin-left:auto;
    margin-right: auto;

#card1
    border-left: 3px solid #f0667f;

.card p:nth-child(1)
    font-size: 20px;
    font-weight: bold;

.card p:nth-child(2)
    color:blue;
    font-size: 19px;


.card p:nth-child(3)
    color:red;


.card p span:before
    content: '\01F642';
    float:right;
    visibility:hidden;



</style>
</head>
<body>
<div class="page">
<div id="app">
<div class="tasks" style="margin-bottom:auto;">
<h2>My Tasks</h2>
<template>
<el-button class="add" @click="dialog = true">Add Task</el-button>
<el-drawer
  title="Add New Task"
  :visible.sync="dialog"
  :before-close="submitForm"
  direction="rtl"
  custom-class="drawer"
  ref="drawer"
  >
  <div class="el-drawer__header">
  <span role="heading" title="Add New Task">Add New Task</span>
  <div class="close" @click="cancelForm()"></div>
</div>
  <div class="drawer__content">
    <el-form :model="form" :rules="rules" ref="form" class="demo-ruleForm">
      <el-form-item label="Task Name" :label- prop="name" required>
        <el-input v-model="form.name" autocomplete="off" placeholder="please input"></el-input>
      </el-form-item>
      <el-form-item label="Description" :label- class="desc">
      <el-input type="textarea" v-model="form.desc"></el-input>
      </el-form-item>
      <el-form-item label="Account" :label- prop="account" required>
        <el-input v-model="form.account" autocomplete="off" placeholder="Type account name for remote search"></el-input>
      </el-form-item>
      <el-form-item label="Assigned To" :label- prop="assigned" required>
        <el-select v-model="form.assigned">
          <el-option label="team1" value="team1"></el-option>
          <el-option label="team2" value="team2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Status" :label- prop="status" required>
        <el-select id="target" v-model="form.status">
          <el-option label="to-do" value="to-do"></el-option>
          <el-option label="in-progress" value="in-progress"></el-option>
          <el-option label="done" value="done"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Priorty" :label- prop="priorty" required>
        <el-select v-model="form.priorty">
          <el-option label="high" value="high"></el-option>
          <el-option label="medium" value="medium"></el-option>
          <el-option label="low" value="low"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="Due Date" :label- prop="date" required>
      <el-date-picker
      v-model="form.date"
      type="date"
      placeholder="Pick a Date"
      format="yyyy/MM/dd">
      </el-date-picker>
      </el-form-item>
      <el-form-item label="Due Time" :label- prop="time" required>
        <el-time-picker
        v-model="form.time"
        :picker-options="
        selectableRange: '00:00:00 - 23:59:59'
        "
        placeholder="Pick a time">
        </el-time-picker>
      </el-form-item>
    </el-form>
    <el-divider></el-divider>
    <div class="drawer__footer">
      <el-button @click="cancelForm()">Cancel</el-button>
      <el-button class="btn" type="primary" @click="submitForm('form')" :loading="loading"> loading ? 'Submitting ...' : 'Save' </el-button>
    </div>
  </div>
</el-drawer>
</template>
</div>
<section class="main">
<div class="details">
<div class="heading heading1">
<h4>To Do</h4>
</div>
<div class="column first">
<div class="card" id="card1">
            <p class="form-item"> getItemData.name </p>
            <p class="form-item"> getItemData.account </p>
            <p class="form-item"> getItemData.date </p>
</div>
</div>
</div>
<div class="details">
<div class="heading heading2">
<h4>In Progress</h4>
</div>
<div class="column second">
<div class="card" id="card2">
            <p class="form-item"> getItemData.name </p>
            <p class="form-item"> getItemData.account </p>
            <p class="form-item"> getItemData.date </p>
</div>
</div>
</div>
<div class="details">
<div class="heading heading3">
<h4>Completed in last 30 days</h4>
</div>
<div class="column third">
<div class="card" id="card3">
            <p class="form-item"> getItemData.name </p>
            <p class="form-item"> getItemData.account </p>
            <p class="form-item"> getItemData.date </p>
</div>
</div>
</div>

</section>
</div>
</div>
<script src="assets/vendor/jquery/js/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/element-ui/lib/umd/locale/en.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.2.0/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js" integrity="sha512-qTXRIMyZIFb8iQcfjXWCO8+M5Tbc38Qi5WzdPOYZHIlZpzBHG3L3by84BBBOiRGiEb7KKtAOAs5qYdUiZiQNNQ==" crossorigin="anonymous"></script>



<script>


ELEMENT.locale(ELEMENT.lang.en)

Vue.use(Vuex);

const store = new Vuex.Store(
  state: 
    form: 
      name: '',
      desc: '',
      account: '',
      assigned: '',
      status: '',
      priorty:'',
      date: '',
      time: ''
      
    
  ,
  mutations: 
    ADD_ITEM(state, payload) 
      // mutate state
      state.form = payload
    
  ,
  actions: 
    addItem ( commit ,payload) 
      commit('ADD_ITEM', payload)
    
  ,
  getters: 
    itemData: state => 
      return state.form
    
  
)


var Main = 
  data() 
    return 
      dialog: false,
      loading: false,
      form: 
        name: '',
        desc: '',
        account: '',
        assigned: '',
        status: '',
        priorty:'',
        date: '',
        time: ''
      ,
      rules: 
          name: [
             required: true, message: 'Please input Task Name', trigger: 'blur' ,
             min: 3, max: 15, message: 'Length should be 3 to 5', trigger: 'blur' 
          ],
          account: [
             required: true, message: 'Please input Account Name', trigger: 'change' 
          ],
          assigned: [
             required: true, message: 'Please select Member Name', trigger: 'change' 
          ],
          status: [
             required: true, message: 'Please Enter status', trigger: 'change' 
          ],
          priorty: [
             required: true, message: 'Please select priorty', trigger: 'change' 
          ],
          date: [
             type: 'date', required: true, message: 'Please pick a Date', trigger: 'change' 
          ],
          time: [
             type: 'date', required: true, message: 'Please pick a time', trigger: 'change' 
          ]
        ,
      formLabelWidth: '110px',
      timer: null,
    ;
    
  ,
  store,
  methods: 
      cancelForm() 
        this.dialog = false
        this.loading = false   
        clearTimeout(this.timer);

      ,
      
      submitForm(formName) 
        
        this.$refs[formName].validate((valid) => 
          if (valid) 
             this.$confirm('Do you want to submit?')
        .then(_ => 
          this.loading = true;
          this.timer = setTimeout(() => 
            // animation takes time
            setTimeout(() => 
              alert('Form Submitted')
              this.loading = false;
              this.dialog = false;
              this.form.date = moment(this.form.date).fromNow();
              this.$store.dispatch('addItem', this.form)


            , 400);
          , 2000);
        )
        .catch(_ => 
         
        ); 

           else 
            console.log('error submit!!');
            return false;
          
        );
      
    ,
    computed: 
     getItemData() 
        return this.$store.getters.itemData
     
    ,
    watch: 
        form: function() 
            console.log(this.form)
        
        


var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

</script>

</body>
</html>

我已将代码放在一个单独的 html 文件中，这样运行起来没有任何困难。在此先感谢您。

【问题讨论】：

【参考方案1】：

在这种情况下，您需要修改 Vuex 商店中的一些部分：

    在您的状态下创建一个名为 tasks 的数组类型的项目： 
    tasks: []
    修改您的突变ADD_ITEM 以将您的有效负载推送到新状态tasks： 
    ADD_ITEM(state, payload) 
      // mutate state
      state.tasks.push(payload)
    您需要创建一些 Vuex getter 来检索按状态过滤的任务，因此，如果您只想检索具有待办事项状态的任务，此 getter 可以帮助您： 
    todoItems: state => 
      return state.tasks.filter(item => item.status === 'to-do')

最后，您需要修改您的 TO-DO 列以遍历您商店中的所有待办事项：

   <div v-for="item in getToDoItems" class="card" id="card1">
     <p class="form-item"> item.name </p>
     <p class="form-item"> item.account </p>
     <p class="form-item"> item.date </p>
   </div>

瞧，现在您可以按每列的状态过滤您的任务。您需要对每个状态执行此操作。

【讨论】：

感谢您的回答。我会检查它并让您知道这是否有效。 我必须修改你的代码才能完成它。干得好。谢谢。

以上是关于根据vue js中的选项选择在不同的div中显示数据的主要内容，如果未能解决你的问题，请参考以下文章

如何在值输入文本上显示选择选项的值？ (vue.js 2)

如何显示和隐藏在 vue js 中动态创建的 div（多格式选项卡结构）

如何使用 React js 在下拉菜单中的选择选项上显示不同的组件

如何在Vue js中绑定带有芯片的复选框（双向绑定）

如何根据淘汰赛js中的单选按钮选择填充文本框

根据 div 中的行数显示“阅读更多”按钮