Vue新手求助：如何将Vue-select选中项传入动态输入框

嘿，我来帮你搞定这个问题！首先看了你的代码，发现几个关键的小问题：一是data里没定义渲染动态input需要的fields数组，二是onChange方法没接住vue-select返回的选中值，所以没法把选中项和input关联起来。

下面是调整后的完整代码，我会一步步给你解释：

模板部分 #

<v-select 
  v-model="productvalue" 
  multiple 
  label="category_desc" 
  :options="options1" 
  @change="onChange" 
></v-select>
<div class="input-group" v-for="(field, index) in fields" :key="index">
  <input type="text" v-model="field.sensitive" placeholder="这里会自动填充选中的分类">
</div>

小提醒：我把你写的:on-change改成了Vue标准的@change事件绑定，sagalbot的vue-select官方推荐这么用，如果你的版本特殊需要:on-change，改回去就行，参数接收逻辑是一样的。

脚本部分 #

export default {
  name: 'ListPurchases', // 这里把名字里的空格去掉了，符合Vue组件命名规范哦
  data(){
    return{
      productvalue:[],
      finds: [],
      options1:[],
      fields: [] // 新增这个数组，专门用来存动态input的绑定数据
    }
  },
  mounted() {
    this.getCategories(); // 组件一挂载就调用获取分类的方法，不用手动触发啦
  },
  methods:{
    getCategories(){
      this.$http.get('http://localhost:3000/api/categories')
      .then((response) => { // 用箭头函数就不用再存_this了，更简洁
        this.options1 = response.data;
      })
      .catch((error) => {
        console.error('获取分类数据失败啦:', error); // 把错误日志写清楚点，方便排查
      });
    },
    onChange(selectedOptions) {
      // 核心逻辑：把选中的每个选项，转换成fields数组里的对象，和input绑定
      this.fields = selectedOptions.map(option => ({
        sensitive: option.category_desc // 这里用你指定的label字段category_desc来填充input
      }));

      // 如果你还需要更新finds数组，也可以在这里同步处理
      this.finds = selectedOptions.map(option => ({
        value: option.category_desc
      }));
    },
  },
}

核心逻辑说明： #

• 新增fields数组：这是动态input的“数据源”，每个元素对应一个input的绑定值，没有它的话v-for根本找不到渲染对象～
• onChange接收选中项：vue-select的change事件会自动把当前选中的所有选项组成的数组传进来，我们用selectedOptions接住它
• 映射选中项到input：用map方法把每个选中的选项转换成{ sensitive: 选项的分类名称 }，这样input的v-model就能和选中值双向绑定——选中选项时input自动填充，修改input内容时fields也会同步更新
• 小细节优化：用箭头函数替代_this避免上下文丢失，在mounted里自动调用获取分类的方法，优化错误日志方便排查问题

这样调整后，你选中几个选项，就会生成几个input，每个input里默认填的就是你选中的分类名称啦～

内容的提问来源于stack exchange，提问作者Rocky