Vue.js中handleEdit方法未触发，数据无法更新问题求解

一、解决「Days选择器不显示」的问题 #

针对这个问题，排查方向和对应解决方法如下：

• 组件未正确注册：如果你使用的是vue-multiselect组件，需要先在当前组件中局部注册，同时引入样式：

  import Multiselect from 'vue-multiselect'
  import 'vue-multiselect/dist/vue-multiselect.min.css'
  
  export default {
    components: { Multiselect },
    // 其他代码...
  }
  

• 数据源格式不匹配：确保weekdayOptions是符合组件要求的数组结构，比如：

  weekdayOptions: [
    { id: 1, weekday: '周一' },
    { id: 2, weekday: '周二' },
    { id: 3, weekday: '周三' },
    // 补全剩余日期
  ]
  

• 模态框渲染时机问题：模态框动态显示时，multiselect可能未完成初始化，给b-modal添加shown事件触发组件更新：

  <b-modal :id="`Rel${object.id}`" ref="editModal" title="Update data" @shown="refreshMultiselect">
    <!-- 原有内容不变 -->
  </b-modal>
  

  然后在methods中添加：

  refreshMultiselect() {
    this.$nextTick(() => {
      this.$forceUpdate()
    })
  }
  

二、解决「点击更新按钮handleEdit未触发」的问题 #

你的表单绑定了submit事件，但缺少触发提交的按钮，导致handleEdit方法无法被调用，以下两种方案任选其一：

方案1：在表单内添加提交按钮 #

直接在form标签末尾添加提交按钮：

<form class="needs-validation" @submit.prevent="handleEdit(object)">
  <!-- 原有表单内容 -->
  <div class="mt-4">
    <button type="submit" class="btn btn-primary">更新</button>
  </div>
</form>

方案2：给b-modal添加底部操作按钮，手动触发提交 #

利用模态框的底部插槽添加按钮，通过表单ref手动触发提交：

<b-modal :id="`Rel${object.id}`" ref="editModal" title="Update data">
  <form ref="editForm" class="needs-validation" @submit.prevent="handleEdit(object)">
    <!-- 原有表单内容 -->
  </form>
  <template #modal-footer>
    <b-button variant="secondary" @click="$bvModal.hide(`Rel${object.id}`)">取消</b-button>
    <b-button variant="primary" @click="$refs.editForm.submit()">更新</b-button>
  </template>
</b-modal>

另外可以检查timesAreValid函数的逻辑是否正常，避免因为前置校验不通过导致后续代码不执行，但当前核心问题是提交事件未触发。

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