关于#vue.js#的问题：el-tag拖放到 el-input框时无法完成填充(语言-javascript) 以下是一些可能的解决方案：

本文链接：https://blog.csdn.net/weixin_64542139/article/details/129699903

关于#vue.js#的问题：el-tag拖放到 el-input框时无法完成填充(语言-javascript)
以下是一些可能的解决方案：
1.检查事件监听器：检查是否正确地监听了拖放事件。如果事件监听器没有正确设置，可能会导致无法填充 el-input 框。您可以使用 Vue.js 提供的 dragstart、dragenter、dragover 和 drop 事件来设置监听器，确保它们正确地响应拖放事件。

2.检查数据绑定：确保正确绑定了数据，以便在拖放操作中更新输入框的值。您可以使用 v-model 指令来绑定输入框的值，然后在拖放事件中更新绑定的数据。

3.检查标签属性：检查 el-tag 的属性是否正确设置。特别是，确保设置了可拖动属性和数据传输类型属性。这些属性是拖放操作所必需的。

4.检查组件嵌套：如果 el-tag 和 el-input 是嵌套在另一个组件中，则可能需要检查父组件的代码，以确保它正确地处理拖放操作。

5.确认 el-input 组件是否具有 v-model 属性或者其他可以接收数据的属性，以便将 el-tag 的值传递给 el-input。例如：

html
Copy code
<el-input v-model="inputValue"></el-input>



然后在 el-tag 组件的 @dragend 事件处理程序中，可以使用 v-model 绑定的 inputValue 属性来设置输入框的值：


```javascript
javascript
Copy code
methods: {
  handleDragEnd(tag) {
    this.inputValue = tag.label;
  }
}

如果你已经正确地设置了 v-model，但是输入框仍然没有正确地填充值，那么可能是因为 el-input 组件在输入框中的值被更新之前，需要触发 input 事件。可以在 handleDragEnd 方法中手动触发该事件，如下所示：

javascript
Copy code
methods: {
  handleDragEnd(tag) {
    this.inputValue = tag.label;
    this.$nextTick(() => {
      this.$refs.input.$emit('input');
    });
  }
}

或者按照以下方法进行操作：
首先，确保您正确地引入了 Vue.js 和相关的组件库，并且已经正确地配置了相关的组件。

然后，您需要在 el-tag 上设置可拖动属性 draggable=“true”，以便使其可被拖动。

html

<el-tag draggable="true">标签</el-tag>

您还需要为 el-tag 设置数据传输类型属性 dataTransfer.setData()，以便在拖动过程中传输数据。在这里，我们可以将标签的文本内容作为数据传输类型。

// 在 el-tag 上设置拖动事件监听器
this.$refs.tag.addEventListener('dragstart', event => {
  event.dataTransfer.setData('text', event.target.textContent);
});

接下来，您需要为 el-input 设置拖放事件监听器，并更新其值。

// 在 el-input 上设置拖放事件监听器
this.$refs.input.addEventListener('drop', event => {
  event.preventDefault(); // 阻止浏览器默认行为
  this.inputValue = event.dataTransfer.getData('text');
});