Vue.js如何绑定API返回的option数据并解决companies未定义报错

你遇到的'companies' is not defined报错是三个问题共同导致的：

• 你在setup函数中注释掉了companies的声明代码，且没有新增其他声明逻辑，最终return给模板的companies本身就不存在
• 你使用了选项式API的mounted钩子发请求，直接赋值companies = response.data属于未声明变量的全局赋值，既不是响应式数据，也无法被模板获取
• 选项式API的生命周期钩子无法直接访问组合式APIsetup中声明的变量，二者的作用域是隔离的

你只要统一使用组合式API的写法，调整代码逻辑即可：

1. 先从@vue/composition-api中导入onMounted生命周期钩子
2. 在setup中声明companies为响应式变量，初始值设为空数组
3. 将axios请求逻辑挪到setup的onMounted中执行，请求成功后给响应式变量的value属性赋值
4. 删除原来选项式的mounted钩子代码

修改后的完整script代码 #

<script>
import {
  BSidebar, BForm, BFormGroup, BFormInput, BFormInvalidFeedback, BButton,
} from 'bootstrap-vue'
import { useToast } from 'vue-toastification/composition'
import ToastificationContent from '@core/components/toastification/ToastificationContent.vue'
import { ValidationProvider, ValidationObserver } from 'vee-validate'
// 新增导入onMounted
import { ref, onMounted } from '@vue/composition-api'
import { required, alphaNum, email } from '@validations'
import formValidation from '@core/comp-functions/forms/form-validation'
import Ripple from 'vue-ripple-directive'
import vSelect from 'vue-select'
import countries from '@/@fake-db/data/other/countries'
import store from '@/store'
import axios from '@/libs/axios'

export default {
  components: {
    BSidebar,
    BForm,
    BFormGroup,
    BFormInput,
    BFormInvalidFeedback,
    BButton,
    vSelect,

    // 表单校验组件
    ValidationProvider,
    ValidationObserver,
  },
  directives: {
    Ripple,
  },
  model: {
    prop: 'isAddNewUserSidebarActive',
    event: 'update:is-add-new-user-sidebar-active',
  },
  props: {
    isAddNewUserSidebarActive: {
      type: Boolean,
      required: true,
    },
    roleOptions: {
      type: Array,
      required: true,
    },
    planOptions: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      required,
      alphaNum,
      email,
      countries,
    }
  },
  setup(props, { emit }) {
    const blankUserData = {
      name: '',
      username: '',
      email: '',
      password: '',
      role: null,
      currentPlan: null,
      company: '',
      country: '',
      contact: '',
    }

    const userData = ref(JSON.parse(JSON.stringify(blankUserData)))
    const resetuserData = () => {
      userData.value = JSON.parse(JSON.stringify(blankUserData))
    }
    const toast = useToast()

    // 新增声明响应式companies变量
    const companies = ref([])

    const onSubmit = () => {
      store.dispatch('app-user/addUser', userData.value)
        .then(
          response => {
            if (response.status === 1) {
              emit('refetch-data')
              emit('update:is-add-new-user-sidebar-active', false)

              toast({
                component: ToastificationContent,
                props: {
                  title: response.message,
                  icon: 'CheckIcon',
                  variant: 'success',
                },
              })
            } else {
              toast({
                component: ToastificationContent,
                props: {
                  title: response.message,
                  icon: 'InfoIcon',
                  variant: 'danger',
                },
              })
            }
          },
          error => {
            console.log(error)
          },
        )
    }

    const {
      refFormObserver,
      getValidationState,
      resetForm,
    } = formValidation(resetuserData)

    // 新增onMounted逻辑，把请求挪到这里
    onMounted(() => {
      const accessToken = JSON.parse(localStorage.getItem('userData'))
      axios.get('companies/all', {
        headers: {
          Authorization: accessToken.accessToken,
        },
      })
      .then(response => {
        // 响应式变量赋值要加.value
        companies.value = response.data
      })
    })

    return {
      userData,
      onSubmit,

      refFormObserver,
      getValidationState,
      resetForm,
      companies,
    }
  },
}
</script>

改完之后companies就是正常的响应式变量，接口返回数据后下拉框会自动渲染选项，也不会再报未定义的错误。

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