Display data in select option using for loop in vuejs?

Question

<a-form-item label="Post" :colon="false">
     <a-select
        @change="changeValue"
        placeholder="Select a value"
       >
        <a-select-option
          v-for="(item, index) in value"
          :value="index"
          :key="item.name"
          >{{ item.name }}</a-select-option>
         </a-select>
   </a-form-item>



const value = {
       "post": {
            "title_new": {
                "name": "New",
                "status": 1
            },
            "title_hot": {
                "name": "Hot",
                "status": 1
            },
        },
      "product": {
            "title_new": {
                "name": "samsung",
                "status": 1
            },
            "title_hot": {
                "name": "iphone",
                "status": 1
            },
        }
    }

methods: {
   changeValue(value) {
      console.log(value); //result : post
  }
}

I am displaying value in select box in vuejs.I want when I hit the event @change="changeValue", then i will get one of 2 keys: title_new and title_hot. Like my treatment above. I only get the key is : post and product. Give me your ideas.Thank you

which ui library are you using?

Boussadjra Brahim
– Boussadjra Brahim

2021-10-15 09:18:31 +00:00
Commented Oct 15, 2021 at 9:18 — Boussadjra Brahim
– Boussadjra Brahim, Commented Oct 15, 2021 at 9:18

Nima Ebrazeh · Accepted Answer · 2021-10-15 09:44:08Z

2

You have to just store value of selected radio in a variable (e.g. post, product, ...). Then you can access them by value[radioValue]:

<a-select-option
    v-for="(item, index) in value[radioValue]"
    :value="index"
    :key="item.name"
>
    {{ item.name }}
</a-select-option>

edited Oct 15, 2021 at 9:44

answered Oct 15, 2021 at 9:22

Nima Ebrazeh

1,3266 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

deskeay Over a year ago

What if there are 2 keys.. for example post with product..I have corrected the question

Nima Ebrazeh Over a year ago

You want to show all of them in one select tag?

deskeay Over a year ago

No. I have checked first, I have 1 radio with post and product..if it selects any I will show the data of that

Nima Ebrazeh Over a year ago

I have just updated my answer.

Collectives™ on Stack Overflow

Display data in select option using for loop in vuejs?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related