Question

如果我上传图片，请将其拖动。似乎输入[type =＆＃39; file＆＃39;] 是静态的。由于其他值将仅拖动到其他行，因此仅保留输入[type =＆＃39; file＆＃39;] 。如何将其与其他值一起移动/拖动？

这是Converting a JS object to an array using jQuery

这是HTML

<div id="main">
  <h1>Vue Draggable Image</h2>
    <div class="drag">
      <h2>List 1 Draggable</h2>
      <draggable v-model="list" class="dragArea" :options="{group:{ name:'people',  pull:'clone', put:false }}">
        <form v-for="(element, index) in list" :key="index" method="POST" enctype="multipart/form-data">
          <input type="text" v-model="element.name">
          <input type="file" id="reference_image" @change="onFileChange($event,index)" name="reference_image" accept="image/*" />
          <img class="small_image" :src="reference_image" name="reference_image" />
        </form>
      </draggable>
    </div>
</div>

这是脚本

var vm = new Vue({
  el: "#main",
  data: {
    list: [{
        reference_image: "",
        name: "name 1"
      },
      {
        reference_image: "",
        name: "name 2"
      },
      {
        reference_image: "",
        name: "name 3"
      },
      {
        reference_image: "",
        name: "name 4"
      },
      {
        reference_image: "",
        name: "name 5"
      },
    ],
  }
});

Answer 1

通过将:key="index"更改为:key="element.name"使其正常工作小提琴：

https://jsfiddle.net/amherve/sqebLtzc/3/

Answer 2

有同样的问题。您找到了任何解决方案吗？。不仅限于输入文件，在我的cas中，我正在使用输入类型收音机

`<div id="main">
 <h1>Vue Draggable</h2>           
 <div class="drag">
 <h2>List 1 Draggable</h2>
  <draggable v-model="list" class="dragArea" :options="{group:'people'}">
  <div v-for="(element,index) in list">{{element.name}}
  <button @click="remove(index)">X
  </button>
  <input type="radio" id="index" name="drone" value="index">
  </div>
  </draggable>
  </div>
  </div>`

https://jsfiddle.net/amherve/nm6c25eg/5/

Vue js无法拖动输入类型文件

2 个答案: