Vue3Compositionneneneba 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) ✅
},
})

演示