Ошибка ссылки на компонент Vue

Question

Я создал компонент Vue, который отображает модальный запрос о том, хотят ли они играть как «X» или «O». Предполагается, что он сможет сделать это, используя v-on: click = 'startComp (' X ') - но это не работает, оно бросает ошибку Reference, и я понятия не имею, почему. Любая помощь будет принята с благодарностью, так как я был на этом в течение нескольких дней ...

Причина, по которой я пытаюсь вызвать функцию в первую очередь, состоит в том, что мне нужно v-on: нажмите, чтобы оба устанавливают this.modal на false (таким образом, удаляя модальные и переходя к «плате») и установите this.marker на соответствующее значение. И afaik, вы можете установить только 1 элемент в v-on: click.

Here is a forked version of my original Codepen for testing this.

** Edit - К сожалению, эта вещь просто плоский из не позволит мне отформатировать код правильно.

<script type="text/x-template" id="modal-template"> 
<transition name="modal"> 
    <div class="modal-mask"> 
     <div class="modal-wrapper"> 
      <div class="modal-container"> 
       <div class="modal-body"> 
        <slot name="body"> 
         <div class='row'> 
          <div class="col-xs-2 select_marker" 
          id="SX" 
          v-on:click='compStart("X")'>X</div> 
          <div class="col-xs-8 select_title"> 
           SELECT<span style='color:#00B16A'>MARKER</span> 
          </div> 
          <div class="col-xs-2 select_marker" 
          id="SO" 
          v-on:click='compStart("O")'>O</div> 
         </div> 
        </slot> 
       </div> 
      </div> 
     </div> 
    </div> 
</transition> 

compStart(marker) { 
     this.marker = marker; 
     this.showModal = false; 
     this.start('comp'); 
    }, 

Answer 1

Таким образом, после 3-х дней разбив головой о стену, я, наконец, понял это. Я предполагаю, что модальный не был внутри целевого элемента для Vue, поэтому вместо v-on: click = 'compStart («X») ему нужно было v-on: click =' game.compStart («X») ».