How can i use @click event with option (vue)

Question

I want to use @click event in option. on vue.

here's my vue code;

<div
  v-for="index in fields"
         :key="index"
>
 <select>
  <option @click="myFunction(index + 1, user)" v-for="user in filteredUsers"
           :key="user"
           :value="user">
           {{ user?.fullName }}
  </option>
 </select>
</div>

it works on Mozilla but not works on chrome or the other browsers. i try to use @change method with select but i can't send "value" as an object.

How can i fix it?

it makes sense when you make something real, fields is what your looping over, it should be an array of objects (item), then you use the model <select v-model="item.user">, array of numbers, might as well hardcode 2 inputs — Lawrence Cherone
– Lawrence Cherone, Commented Aug 8, 2022 at 15:01

Daniil8k · Accepted Answer · 2022-08-08 15:00:56Z

1

You can't just bind an event to an option. You can bind @change to the <select> as in the example below.

It's also a good idea to provide an id (or some unique primitive value) to your option key.

var app = new Vue({
  el: "#app",
  data() {
    return {
      fields: [1, 2],
      filteredUsers: [
        { id: "user_1", fullname: "Susan Harris" },
        { id: "user_2", fullname: "Helen Thomas" },
        { id: "user_3", fullname: "Luis Scott" },
      ],
    };
  },
  methods: {
    myFunction(obj, index) {
      console.log(JSON.parse(obj), index);
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="index in fields" :key="index">
    <select @change="myFunction($event.target.value, index)">
      <option
        v-for="user in filteredUsers"
        :key="user.id"
        :value="JSON.stringify(user)"
      > {{ user?.fullname }}
      </option>
    </select>
  </div>
</div>

edited Aug 8, 2022 at 15:00

answered Aug 8, 2022 at 14:31

Daniil8k

1617 bronze badges

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

1 Comment

ibrahimcankarta Over a year ago

Thanks! :value="JSON.stringify(user)" part is total match for me. it works.

Amaarockz · Accepted Answer · 2022-08-08 14:53:59Z

Check the below code

var app = new Vue({
  el: "#app",
  data() {
    return {
      fields: [1, 2],
      filteredUsers: [
        { id: "u1", fullname: "Steve" },
        { id: "u2", fullname: "Tony" },
        { id: "u3", fullname: "Strange" },
      ],
    };
  },
  methods: {
    myFunction(obj, index) {
      console.log(obj.target.value, index); // Change added
    },
  },
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div v-for="index in fields" :key="index">
    <select @change="myFunction($event, index)"> <!-- change added -->
      <option
        v-for="user in filteredUsers"
        :key="user.id"
        :value="user.fullname"
      > {{ user.fullname }}
      </option>
    </select>
  </div>
</div>

Collectives™ on Stack Overflow

How can i use @click event with option (vue)

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related