Home > other >  Display data in select option using for loop in vuejs?
Display data in select option using for loop in vuejs?

Time:10-15

<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

CodePudding user response:

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>
  • Related