这两个字段要用逗号隔开反显到输入框里

好的，那么你可以在视图层使用计算属性来实现这个需求。

首先，在Vue组件中定义两个数据变量来存储产品名称和产品代码，初始值为空字符串。

data() {
  return {
    productName: '',
    productCode: '',
    options: []
  }
}

然后，在组件的`mounted`钩子函数中发送异步请求获取接口数据，并将数据封装成一个对象数组。

mounted() {
  axios.get('your_api_url', {
    params: {
      fields: 'productName,productCode' // 指定需要返回的字段
    }
  }).then(response => {
    let data = response.data;
    let options = data.map(item => {
      return {
        label: item.productName + ',' + item.productCode, // 将产品名称和产品代码拼接成一个字符串
        value: item.productCode
      }
    });
    this.options = options; // 将封装好的对象数组保存到options变量中
  });
}

接下来，在Vue组件中定义一个计算属性来将选择的产品名称和产品代码拼接成一个字符串。

computed: {
  selectedOptionLabel() {
    return this.productName + ',' + this.productCode;
  }
}

最后，在模板中使用`v-model`指令将下拉框的值绑定到组件的`productCode`变量上，并使用`v-bind`指令将计算属性绑定到输入框的`value`属性上。

<template>
  <div>
    <select v-model="productCode">
      <option v-for="option in options" :value="option.value">{{ option.label }}</option>
    </select>
    <input type="text" v-bind:value="selectedOptionLabel" />
  </div>
</template>

这样，当用户选择下拉框中的选项时，组件的`productCode`变量会更新为用户所选的值，并且计算属性`selectedOptionLabel`会将选择的产品名称和产品代码拼接成一个字符串，再将这个字符串绑定到输入框中。