关于#vue.js#的问题：el-tag拖放到 el-input框时无法完成填充(语言-javascript)

el-tag拖放到 el-input框时无法完成填充

想实现的效果是如图

主要是不理解这里面的数据绑定问题，有么可以指导一下的，真的被烦恼太久了.QAQ

解决了嘛没解决可以私信我，一步步教你，原生js 或者 vue 都可以

根据您的描述，您似乎是想要在拖放 el-tag 到 el-input 中时，将 el-tag 的内容自动填充到 el-input 中。以下是一个可能的解决方案：

在 Vue 组件中设置 data 属性，包括一个空字符串属性 inputText 和一个数组属性 tags，用于存储 el-tag 中的文本内容。


```javascript
data() {
  return {
    inputText: '',
    tags: []
  }
}


1. 在 el-tag 的 @dragstart 事件中，将 el-tag 的文本内容存储到 tags 数组中。

```typescript
<el-tag
  v-for="(tag, index) in tags"
  :key="index"
  :draggable="true"
  @dragstart.native="handleDragStart(tag)"
>
  {{ tag }}
</el-tag>

...

methods: {
  handleDragStart(tag) {
    this.draggedTag = tag;
  },
  ...
}

在 el-input 的 @drop 事件中，将 inputText 属性设置为拖动的标签的内容。


```kotlin

<el-input
  v-model="inputText"
  @drop.native.prevent="handleDrop"
></el-input>

...

methods: {
  ...
  handleDrop(event) {
    this.inputText = this.draggedTag;
  }
}

```
这样，当您将 el-tag 拖动到 el-input 中时，el-input 的值将自动设置为拖动的 el-tag 的文本内容。

请注意，为了使 el-input 可以接收拖动事件，需要使用 @drop.native.prevent 而不是 @drop，并且需要在事件处理程序中调用 preventDefault() 方法以防止浏览器默认行为。望采纳，谢谢

该回答引用于gpt与OKX安生共同编写：

该回答引用于gpt与OKX安生共同编写：

您好，从您的问题描述来看，我了解到您在使用Vue.js时遇到了el-tag拖放到el-input框时无法完成填充的问题。正常情况下，拖放el-tag应该能够将标签的值传递给输入框并完成填充。以下是一些可能导致问题的原因以及解决方法：

确保el-tag和el-input都有正确的v-model绑定。这可以确保标签的值在拖放时被正确地传递给输入框。例如：

<el-tag v-for="tag in tags" :key="tag" :closable="true" @close="removeTag(tag)">
  {{ tag }}
</el-tag>

<el-input v-model="inputValue" placeholder="请输入内容">
</el-input>

检查处理拖放事件的方法是否正确。在el-tag上使用v-on指令来监听dragstart事件，并将当前标签的值保存到data属性中。然后，在el-input上使用v-on指令来监听drop事件，并获取保存在data中的标签值，将其添加到输入框中。例如：

<el-tag v-for="tag in tags" :key="tag" :closable="true" 
        @close="removeTag(tag)" 
        draggable="true" 
        :data-value="tag"
        v-on:dragstart="handleDragStart">
    {{ tag }}
</el-tag>

<el-input v-model="inputValue" placeholder="请输入内容" 
          v-on:drop="handleDrop($event)">
</el-input>

methods: {
  handleDragStart(event) {
    event.dataTransfer.setData('text/plain', event.target.getAttribute('data-value'));
  },
  handleDrop(event) {
    event.preventDefault();
    const tagValue = event.dataTransfer.getData('text/plain');
    this.inputValue += tagValue + ' ';
  }
}

确保在el-input上正确地设置了dragover事件的处理方法，使其接受拖放元素。例如：

<el-input v-model="inputValue" placeholder="请输入内容" 
          v-on:drop="handleDrop($event)" 
          v-on:dragover="handleDragOver($event)">
</el-input>

methods: {
  handleDragOver(event) {
    event.preventDefault();
  },
  handleDrop(event) {
    event.preventDefault();
    const tagValue = event.dataTransfer.getData('text/plain');
    this.inputValue += tagValue + ' ';
  }
}

希望这些解决方法对您有所帮助，如有疑问请随时追问。

不知道你这个问题是否已经解决, 如果还没有解决的话:

你看下这篇博客吧, 应该有用👉 ：vue.js element el-talbe 内嵌el-input 无法编辑，视图不刷新（更新）

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^

基于GPT回答这个问题：
这个问题可能是因为数据绑定不正确导致的。在Vue.js中，可以通过v-model指令将表单元素和Vue实例中的数据进行双向绑定。

在这个问题中，el-tag拖放到el-input框中时，可能需要将el-tag的值绑定到el-input中。可以通过绑定一个data属性来实现这个功能。
例如：

<template>
  <div>
    <el-tag v-for="(tag, index) in tags" :key="index" @dragstart="handleDragStart">{{ tag }}</el-tag>
    <el-input v-model="inputValue" @drop="handleDrop"></el-input>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tags: ['tag1', 'tag2', 'tag3'],
      inputValue: ''
    }
  },
  methods: {
    handleDragStart(event) {
      // Set the data to be transferred during drag-and-drop
      event.dataTransfer.setData('text/plain', event.target.innerText);
    },
    handleDrop(event) {
      // Prevent the default behavior of the browser
      event.preventDefault();
      // Get the data that was transferred during drag-and-drop
      const tag = event.dataTransfer.getData('text/plain');
      // Set the input value to the dropped tag
      this.inputValue = tag;
    }
  }
}
</script>

在上述代码中，el-tag元素的值被绑定到了一个数组(tags)中。当拖放事件发生时，可以通过event.dataTransfer对象来传递数据。在handleDragStart方法中，我们将标签的值设置为要传递的数据。

在handleDrop方法中，我们首先阻止了浏览器的默认行为，然后获取了传递的数据，并将其设置为inputValue的值。由于el-input元素使用了v-model指令，因此inputValue的值会自动更新到el-input中。

希望这个例子可以帮助你解决问题。