Question

我正在研究一种拖拽机制，需要在删除后使用正确的列ID更新项目。这有效，直到我将项目放回原始元素。然后它就消失了。查看数据对象，显示正确的数据

https://jsfiddle.net/rooseboom/u6u23u1o/

将灰色Test3卡从Backlog移至Todo。您会看到电路板ID数据已更新（就像它应该的那样）。现在再把它移回去。在显示的顶部数据中，板ID再次正确更新，但项目消失（据我所知，v-if语句）

我无法弄清楚该项目消失的原因。有帮助吗？ THX。

html：

<div id="boardcanvas" class="boardcanvas">

        <div v-for="(task, index) in tasks" >
                       data: {{task.name}} - boardid: {{task.boardId}} <br>
        </div>
        <Br><br>

        <div v-for="(column,index) in columns" v-bind:id="'column'+column.boardId" class="boardcolumn">

            <div class="columnHeader"> {{ column.boardName }}</div>

            <div class="columnContent" v-bind:id="column.boardId">

                <div v-for="(task, index) in tasks" v-if="task.boardId == column.boardId" v-bind:id="task.taskId+'-'+index" class="cardcontainer">
                    <span class="card">
                        {{task.name}} <br> {{task.boardId}}
                    </span>
                </div>

            </div>

        </div>

    </div>

的javascript：

var boards = JSON.parse("[{\"boardId\":\"1234567894\",\"boardName\":\"Backlog\"},{\"boardId\":\"1234567890\",\"boardName\":\"Todo\"},{\"boardId\":\"1234567893\",\"boardName\":\"Done\"}]");

var tasksd = JSON.parse("[{\"taskId\":\"58646f066803fa62388b4573\",\"name\":\"test1\",\"boardId\":\"1234567891\"},{\"taskId\":\"58646f066803fa62388b4572\",\"name\":\"test2\",\"boardId\":\"1234567894\"},{\"taskId\":\"58646f066803fa62388b4571\",\"name\":\"test3\",\"boardId\":\"1234567894\"}]");

var appBoard = new Vue({
  el:'#boardcanvas',
  data: {
    columns: boards,
    columnCount: boards.length,
    tasks: tasksd,
  },
  mounted: function(){
    console.log(JSON.stringify(this.tasks))
    $( ".columnContent" ).sortable({
      revert: true,
      opacity: 0.5,
      helper: 'clone',
      placeholder: 'drag-place-holder',
      forcePlaceholderSize: true,a
      connectWith: ".columnContent",
      start: function (e, ui) {ui.item.show().addClass('ghost')},
      stop: function (e, ui) {
        ui.item.show().removeClass('ghost')
      },
      update: function(e, ui) {
        if(ui.sender){
          var newBoardId = $(this).closest('div').attr('id');

          var currentTaskId = ui.item.attr('id')
          var taskSplit = currentTaskId.split("-");
          var taskIndex = parseInt(taskSplit[1])

          appBoard.moveTask(taskIndex,newBoardId)
        }
      },
      cursor:'move'
    })
  },
  methods:{
    moveTask: function(index,newBoardId) {

      appBoard.$set(this.tasks[index], 'boardId', newBoardId)

      console.log(JSON.stringify(this.tasks))
    }
  }
})

vue.js v-if与拖放组合失败

0 个答案: