Clickable component

[DerProfi]

@leandroinacio I can't figure out how to make the rendered components clickable in the App.Vue. Tried using $emit, but it doesn't work.

[leandroinacio]

Hey @DerProfi, nice start! @click works normally on App.vue. You can check that by changing the following line on that file (add the click there): <div class="container" @click="change">

The problem is that your Field.vue does not emit any click events. To solve it, you have two options:

1. On App.vue, change your @click to a @click.native. It will look like this: <field v-for="(field, idx) in fields" :key="idx" @click.native="change"/>

You can read more about this modifier here: https://vuejs.org/v2/guide/components-custom-events.html#Binding-Native-Events-to-Components

2. On Field.vue, add a @click in the root div and there, add an $emit('click'). You are basically, re-emitting the click to the App.vue. You can read more about that here: https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

That should solve your problem.

[leandroinacio]

Now, let me also add a couple of comments about the code structure and the app here.

1. It's nice that you have a Field component, but I see a lot of code going to the root of your app. How about creating a "Board" component to handle the rules of the game? This way, whenever the user wants to generate a new game you can just setup a new board. Besides, code related to the rules of the game will be in a separate component and the App.vue can focus on navigation (new game button, messages, etc).
2. How about an input to allow the users to enter their names?
3. How about an options page, to allow a player vs player and also a player vs computer option?
4. How about saving the history of the last played games?

Let me know what you think.