Question

我有两个列表，用户可以将项目从列表1拖到列表2，并且有一个带有文本输入的按钮，因此用户可以将自己的输入添加到列表2，这将使用axios在MYSQL数据库中自动更新。

这是AddItem脚本

 addItembh(){
                var input = document.getElementById('itemFormbh');
                if(input.value !== ''){

// this line  makes a new article with input value but no attribute :(
                this.tasksNotCompletedNew.unshift({

                   behv_skilldesc:input.value
                });

                 axios.post('../joborder/addAttrib', {
                behv_skilldesc: input.value,
                type:'behvnew',
                    joborder_id: this.joborder_id ,
                    alljobs_id: this.alljobs_id
            }).then((response) => {
                console.log(response.data);
            }).catch((error) => {
                console.log(error);
            });
                input.value='';
            }  
        },

要明确说明这个问题：我需要为要创建的新文章分配一个属性，以便稍后可以在deleteItem方法上找到该属性的文本

更新：

<template>
    <div class="row">

        <div class="col-md-4 col-md-offset-2">
            <section class="list">
                <header>Drag or Add Row Here</header>
                <draggable class="drag-area" :list="tasksNotCompletedNew" :options="{animation:200, group:'status',handle:'disabled'}" :element="'article'" @add="onAdd($event, false)"  @change="update">

                    <article class="card" v-for="(task, index) in tasksNotCompletedNew" :key="task.prof_id" :data-id="task.prof_id" @change="onChange">
                        <span >
                            {{ task.prof_skilldesc }}
                        </span>
                        <span v-if="task.prof_skilldesc !== 'Drag Here'">
                        <button  class="pull-left"  @click="deleteItem(task.prof_id) + spliceit(index)" ><i class="fa fa-times inline"></i></button>
                  </span>
                    </article>
                    <article class="card" v-if="tasksNotCompletedNew == ''">
                        <span>
                  Drag Here
                        </span>

                    </article>
                </draggable> 

                <div>
                         <input id='itemForm' />
                <button v-on:click='addItem' class="btn btn-theme btn-success" style='margin-top:5px;' >Add a row </button>
                </div>
            </section>
        </div>
        <div class="col-md-4">   
            <section class="list">
                <header>List of Skills ( Hold left click )</header>
                <draggable class="drag-area"  :list="tasksCompletedNew" :options="{animation:200, group:'status'}" :element="'article'" @add="onAdd($event, true)"  @change="update">
                    <article class="card"
                             v-for="(task, index) in visibleskills"
                           :key="task.prof_id" :data-id="task.prof_id"

                             >
                       {{ task.prof_skilldesc }}
                    <div v-if="index == 4" style="display:none" >{{index2 = onChange(index)}}</div>
                                          </article>
                               <pagination
                   v-bind:tasksCompletedNew ="tasksCompletedNew"
                   v-on:page:update ="updatePage"
                   v-bind:currentPage ="currentPage"
                   v-bind:pageSize="pageSize">

               </pagination>   
                </draggable>  
            </section>
        </div>
    </div>
</template>

因此，在添加一行后，我们的方法将称为。感谢您的帮助

将属性添加到未移动项vuejs

0 个答案: