v-showの中でセレクトボックスや送信ボタンが使いたい

Question

v-showでの要素はクリックするたびに表示非表示が切り替わります。
表示内でセレクトボックス等の操作をするときには表示したままに
したいのですが方法がわかりません。よろしくお願いします。

    <li class = 'q' style= "cursor: pointer;" @click = "list.show =! list.show " v-for = " list in lists" :key ="list.show" >
      <p v-show ="list.show" >{{list.a}}</p>
 
　<select id='hyoka'>
  <option value='5'>5</option>
  <option value='4'>4</option>
  <option value='3'>3</option>
  <option value='2'>2</option>
  <option value='2'>1</option>
</select>

<button = submit>...

</li>

Answer 1

selectタグのクリックイベントの伝播を停止するにはselectタグに@click.stopを指定します。
なお、下記の例ではbuttonタグには指定していないので送信ボタンのクリックイベントは伝播します。

<template>
  <ul>
    <li @click="list.show = !list.show" v-for="(list, index) in lists" :key="index">
      <p>{{ list.name }}</p>
      <div v-show="list.show">
        <select @click.stop>
          <option value="5">5</option>
          <option value="4">4</option>
          <option value="3">3</option>
          <option value="2">2</option>
          <option value="1">1</option>
        </select>
        <button type="submit">送信</button>
      </div>
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      lists: [
        { name: 'xxx', show: false },
        { name: 'yyy', show: false },
        { name: 'zzz', show: false }
      ]
    }
  }
}
</script>

<style scoped>
li {
  cursor: pointer;
}
</style>

Comments

[shoshi]

ありがとうございます！
期待通りの動作になりました！