Vue3 Composition API - 如何从 Ajax 加载默认值？

Question

我已经阅读了我能找到的所有内容，但方法之间存在令人困惑的可变性。我想使用 Vue3 组合的“设置”形式 API，我认为这是未来兼容性的推荐方法。

我有一个包含如下元素的表单：

<form @submit.prevent="update">
        <div class="grid grid-cols-1 gap-6 mt-4 sm:grid-cols-2">
          <div>
            <label class="text-gray-700" for="accountID">ID</label>
            <input disabled id="accountID" v-model="accountID"
                   class="bg-slate-100 cursor-not-allowed w-full mt-2 border-gray-200 rounded-md focus:border-indigo-600 focus:ring focus:ring-opacity-40 focus:ring-indigo-500"
                   type="text"
            />
          </div>

我想用 Ajax 加载当前值。如果用户提交表单，那么我想使用 PATCH 请求保存更改的字段。

我不知道如何用 Ajax 请求的结果更改表单值并仍然保持绑定。

Vue3 阻止直接更改道具（这是有道理的），所以下面的代码不起作用：

<script setup lang="ts">    
import { ref, onMounted, computed } from "vue";
import axios from "axios";
import { useUserStore } from "@/stores/userStore";
const userStore = useUserStore();

const props = defineProps({
    accountID: String,
});

const emit = defineEmits(['update:accountID'])

const accountID = computed({
get() {
    return props.accountID;
},
set (value) {
    return emit('update:accountID')
},
})

onMounted(async () => {    
    let response = await axios.get("http://localhost:8010/accounts", { headers: { "Authorization": "Bearer " + userStore.jws } });    
    // This is a readonly variable and cannot be reassigned
    props.accountID = response.data.ID;    
});

function update() {
    console.log("Form submitted")
}
</script>

如何使用 Ajax 请求的结果设置表单值？

Answer 1

不是尝试分配 props.accountID，而是更新 accountID 计算属性，它通过计算的 setter 更新相应的 v-model:accountID。然后 v-model 更新通过绑定反映回组件：

onMounted(async () => {
  let response = await axios.get(…)
  // props.accountID = response.data.ID ❌ cannot update readonly prop
  accountID.value = response.data.ID    ✅
})

另请注意，您的计算 setter 需要发出新值：

const accountID = computed({
  get() {
    return props.accountID
  },
  set(value) {
    // return emit('update:accountID')     ❌ missing value
    return emit('update:accountID', value) ✅
  },
})

demo

Vue3 Composition API - 如何从 Ajax 加载默认值？

Vue3 Composition API - How to load default values from Ajax?

vue.js

vuejs3

vue-composition-api