Vue数据表格中Axios请求成功后动态修改下拉框后缀图标问题

问题根源 #

1. 使用全局icon变量导致所有行下拉框图标同步变化，无法单独控制单行状态。
2. 直接修改v-select的appendIcon属性违反Vue单向数据流规则（组件props为只读），因此触发报错。
3. 循环中的ref="nilais"会生成数组，直接通过this.$refs.nilais.appendIcon操作逻辑不成立。

正确实现方式 #

通过数据驱动，为表格每行数据添加独立的图标属性，请求成功后修改对应行的该属性，让Vue自动响应式更新视图。

修改后的模板代码

<v-data-table :items="tableData">
  <!-- 其他列配置 -->
  <template v-slot:item.quality="props">
    <v-select
      v-model="props.item.quality"
      :items="['100', '95', '90','85', '80','75', '70']"
      :append-icon="props.item.icon"
      @update:modelValue="editData(props.item)"
      return-object        
    ></v-select>
  </template>
</v-data-table>

修改后的脚本代码

export default {
  data: () => ({
    tableData: [] // 表格数据源
  }),
  methods: {
    // 初始化表格数据时，为每条数据添加默认图标
    loadTableData() {
      // 示例：从接口获取数据后，为每条数据追加icon属性
      axios.get('你的数据接口地址').then(res => {
        this.tableData = res.data.map(item => ({
          ...item,
          icon: 'mdi-close' // 初始图标设为关闭状态
        }))
      })
    },
    editData(currentItem) {
      axios.post('http://localhost/vue1/action.php', {
        action: 'one',
        id: currentItem.id,
        nilai: currentItem.quality
      }).then(response => {
        console.log(response.data)
        // 请求成功后，切换当前行图标为对勾
        currentItem.icon = 'mdi-check-bold'
        
        // 可选：2秒后恢复原图标（根据需求调整时长）
        setTimeout(() => {
          currentItem.icon = 'mdi-close'
        }, 2000)
      }).catch(error => {
        console.error('更新失败:', error)
      })
    }
  },
  mounted() {
    this.loadTableData()
  }
}

关键说明 #

• 每条表格数据独立维护icon属性，实现单行图标的精准控制。
• 通过修改数据属性触发视图更新，符合Vue响应式原理，避免直接操作组件props的错误。
• 修正了原代码中method的拼写错误（应为methods）。

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