启用使用 routerlink 作为子 vue 3 单击父标签

Question

I have a RouterLink used inside a li tag and which basically makes a simple dropdown menu, When options are present on the dropdown menu I can click on the text to go to the next page but not click anywhere else inside the box, instead I want to be able to click on the whole "bar" which is the li tag to be able to go to the page

<ul>
  <li v-for="product in products">
     <RouterLink :to="/product"> {{product}} </RouterLink>
  </li>
</ul>

this creates a dropdown like this:

|product name |

|product 2 name |

Now clicking on only text works but I want to be able to click inside the box as well. How do you solve that. Another question is how do I close the dropdown when it is clicked anywhere else.

Answer 1

The intuitive solution is to add click event handler to the li tag and use $router.push('/product') :

<ul>
  <li v-for="product in products" @click="$router.push('/product')">
       {{product}}
  </li>
</ul>