时间戳

首页 > 解决方案 > 先自动选择在 Vue 3 中加载异步选项时的选项我有一个 <select> HTML 元素，我想将它的 v-model 绑定到 Vue.js 3 的 setup() 方法中的 ref 值。因此，当用户选择不同的选项时，Form.ProductID 引用会更新。这是 <select> 代码： <select v-model="Form.ProductID" id="ProductID" name="ProductID"> <option value=

问题描述

标签： javascriptvue.jsvuejs3vue-composition-apivue-reactivity

解决方案

在关于如何在异步加载时选择第一个选项的评论中回答更新的问题。加载数据后，将 的值设置为Form选项数组中的第一项（克隆以避免改变它），而不是手动操作输入 DOM。

例如：

<select v-model="Form.ProductID" id="ProductID" name="ProductID" v-if="options">
  <option v-for="option in options" :key="option.ProductID" :value="option.ProductID">
    {{ option.ProductID }}
  </option>
</select>

setup() {
  const options = ref(null);
  const Form = ref(null);

  axios.get('...').then(response => {
    options.value = response.data;
    Form.value = { ...options.value[0] };    // Clone and select first option
  });
  return { options, Form }
}

有一个延迟它v-if的<select>渲染，直到数据准备好。

这是一个演示：

const { createApp, ref } = Vue;
const app = createApp({
  setup() {
    const options = ref(null);
    const Form = ref(null);
    
    axios.get('https://jsonplaceholder.typicode.com/posts').then(response => {
      options.value = response.data;
      Form.value = { ...options.value[0] };    // Clone and select first option
    });
    return { options, Form }
  }
});
app.mount("#app");
<div id="app">
  <select v-model="Form.id" id="ProductID" name="ProductID" v-if="options">
    <option v-for="option in options" :key="option.id" :value="option.id">
      {{ option.id }}
    </option>
  </select>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios"></script>

推荐阅读