输入CHECBOX V-MODEL不使用异步数据检查

Question

我有一个开始，从数据库中获取数据。它可以选择检查输入是否为true或false。但是问题是没有检查其何时为。我尝试了：检查并起作用，但是由于具有两种方式绑定的

代码：

<input type="checkbox" v-model="data">


const data = ref(false)

onBeforeMount(async () => {
    await data = fetchingData()
})

我没有编写孔代码，因此我需要V型模型，因为它在另一台计算机上的代码是从HEARD上写的。但是我的台词和v-Model没有检查。如果我使用：检查它的工作就像魅力一样，

也许这是一个新秀错误，但没有使用：检查：更改我没有看到任何解决方案。

Answer 1

您应该使用data.value而不是数据进行反应性。为了演示目的，我将值直接分配为true。您可以用API呼叫代码替换。

实时演示：

<script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-rc.5/vue.esm-browser.js"></script>
<div id="app">
  <input type="checkbox" v-model="data"/>
</div>

<script type="module">
import {ref, createApp, onBeforeMount } from 'https://cdnjs.cloudflare.com/ajax/libs/vue/3.0.0-rc.5/vue.esm-browser.js';

const app = createApp({
  setup() {
    let data = ref(false)
    onBeforeMount(() => {
      // data = true ❌
      data.value = true // ✅
    })
    return { data };
  }
});

app.mount('#app')
</script>

Answer 2

我认为这不是复选框，但是您应该使用.value。写入ref 时。否则，您会失去反应性，而V模型将不起作用。

onBeforeMount(async () => {
    data.value = await fetchingData()
})  

希望这会有所帮助。