CODEWITHSUNDEEP
javascriptvue.jsvuejs2vue-component
Marketingexpert
Marketingexpert

Reputation: 1461

Vue 2 Dynamic Model with V-for loop pass v-model

I am using a v-for loop to get categories from a vuex store and display in a dropdown form like here:

<label for="sub-category">
  <select name="sub-category" required>
    <option value="">Choose sub category</option>
    <option v-for="(sub, index) in subcategory" :key="index" :value="sub.value">{{ sub.name }}</option>
  </select>
  <span class="form-error">
    <p>You have to choose a sub-category</p>
  </span>
</label>

Now everything above works fine, but now I want to save its value to data() and then use that data to make a post request.

I tried

export default {
  name: 'formPost',
  data() {
    return {
      selectedSubCat '',
      show: false,
    };
  },

  components: {
    Headers,
    Footers,
  },
};

then on the form add a v-model="selectedSubCat", but it's not working.

I also tried:

<select name="sub-category" required>
    <option value="">Choose sub category</option>
    <option v-model="selectedSubCat[sub.value]" v-for="(sub, index) in subcategory" :key="index" :value="selectedSubCat">{{ sub.name }}</option>
  </select>

How can I fix this problem?

I FIXED IT :(

<select name="sub-category" required v-model="selectedSubCat">
    <option value="">Choose sub category</option>
    <option v-for="(sub, index) in subcategory" :key="index" :value="selectedSubCat">{{ sub.name }}</option>
  </select>

I was missing it :( - I had to get the value from select...

Upvotes: 1

Views: 780

Answers (1)

Marketingexpert
Marketingexpert

Reputation: 1461

This is the solution to my problem! 

<select name="sub-category" required v-model="selectedSubCat">
    <option value="">Choose sub category</option>
    <option v-for="(sub, index) in subcategory" :key="index" :value="selectedSubCat">{{ sub.name }}</option>
  </select>

Upvotes: 1

Related Questions