Configuring the default value for a selection menu in Vue3

Question

Configuring the default value for a selection menu in Vue3

Obtaining all available categories:

const fetchCategories = async () => {
  let response = await axios.get(`/api/get_all_category/`)
  categories.value = response.data.categories
}

The structure of categories.value is shown here:

https://i.sstatic.net/IIXai.png

Initializing the default option:

let selectedCategory
const fetchSingleProduct = async () => {
  let response = await axios.get(`/api/get_edit_product/${props.id}`)
  form.value = response.data.product
   
  //form.value.category_id ranges from 1 to 6
  selectedCategory = ref(form.value.category_id) 
}

Constructing the select dropdown menu:

<div class="my-3">
  <p>Select product type</p>
  <select v-model="selectedCategory">
    <option v-for="category in categories" :key="category.id" :value="category.id">
      {{ category.name }}
    </option>
  </select>
</div>

All options are displayed correctly, but the default selection does not seem to be applied as expected.

javascript vue.js vuejs3

Answer 1

Answer №1

Consider setting selectedCategory as a reactive variable using ref:

const { ref, computed } = Vue
const app = Vue.createApp({
  setup() {
    const categories = ref([{id: 1, name: 'aaa'}, {id: 2, name: 'bbb'}, {id: 3, name: 'ccc'}])
    let selectedCategory = ref(null)
    const getSingleProduct = () => {
      //let response = await axios.get(`/api/get_edit_product/${props.id}`)
     // form.value = response.data.product
      //form.value.category_id is a number from 1 to 6
       selectedCategory.value = 3
    }
    getSingleProduct()
    return { categories, selectedCategory }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="my-3">
    <p>Select product category:</p>
    <select v-model="selectedCategory">
      <option v-for="category in categories" :key="category.id" :value="category.id" :selected="selectedCategory">
        {{ category.name }}
      </option>
    </select>
  </div>
</div>

Answer 2

Consider setting selectedCategory as a reactive variable using ref:

const { ref, computed } = Vue
const app = Vue.createApp({
  setup() {
    const categories = ref([{id: 1, name: 'aaa'}, {id: 2, name: 'bbb'}, {id: 3, name: 'ccc'}])
    let selectedCategory = ref(null)
    const getSingleProduct = () => {
      //let response = await axios.get(`/api/get_edit_product/${props.id}`)
     // form.value = response.data.product
      //form.value.category_id is a number from 1 to 6
       selectedCategory.value = 3
    }
    getSingleProduct()
    return { categories, selectedCategory }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div class="my-3">
    <p>Select product category:</p>
    <select v-model="selectedCategory">
      <option v-for="category in categories" :key="category.id" :value="category.id" :selected="selectedCategory">
        {{ category.name }}
      </option>
    </select>
  </div>
</div>

Configuring the default value for a selection menu in Vue3

Answer №1

Similar questions

The simple passport.js sign-up feature is not successful as it mistakenly believes that the username is already in

Ways to retrieve the initial value and proceed with a subsequent subscription method

Sending an Array from JavaScript to Asp.net Core

Save a randomly generated string in the Session, which will be replaced when accessed through a different PHP file

What is the process for obtaining a JSON file in AngularJS upon clicking a button?

"Converting a basic function into a promise for an AngularJS tutorial: How to handle the error message '

Utilize the same Apollo GraphQL query definition across various Vue components for different properties

Query key array failing to update when key is modified

Which one relies on the other: angular-data or angular-cache?

When the LI element is clicked, it triggers the display of another LI element without affecting the rest of the

Frames of Animation

JavaScript generating HTML code causing malfunctions

Exploring the concept of Promises through the lens of recursion

What is the best method for securely storing and managing refresh and access tokens within a node.js application?

The issue of page content failing to refresh when loaded using AJAX technology

The component "SafeAreaViewRN" could not be located within the UIManager

Troubleshooting issue with Highcharts 3D rendering after using setState()

There is no throttleTime function available in Angular 6 within Rx Js

Attempting to create an array using jQuery's :checked selector

Unlock the power of React Testing Library with the elusive waitFor function