vueでコンポーネントのメソッドが動作しない

Question

vueを始めたばかりの初心者です。以下のコードを実行するとこういった画面になります。
下の123をクリックしたときにinputの中に数字が足されるようにしたいのですが、動作しません。下の123はthreenumbersコンポーネントに紐づけているので、threenumbersコンポーネントのaddNumbersメソッドが呼ばれて欲しいのですが、見つからないらしくエラーがでます。

一番上の1は試験的に挿入しているもので、testインスタンスに紐づいていますがこちらのaddNumbersメソッドは問題なく呼ばれます。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div>
  <div id="display-number">
    <input v-model="display" v-bind:placeholder="defaultDisplay">
  </div>
  <div class="number" v-on:click="addNumber">
    1
  </div>
  <div id="keypad">
    <threenumbers
      v-on:click="addNumber"
      v-for="number in numbers"
      v-bind:number="number"
      v-bind:key="number.id"
    ></threenumbers>
  </div>
  </div>  
  
  
 <script>
  var display = new Vue({
    el: '#display-number',
    data: {
      display: '',
      defaultDisplay: '0312345678'
    }
  })

  Vue.component('threenumbers', {
    props: ['number'],
    template: '<div>{{ number.text }}</div>',
    methods: {
      addNumber: function () {
        display.display += '1'
    }}
  })

  var app = new Vue({
    el: '#keypad',
    data: {
      numbers: [
        { id: 0, text: '1' },
        { id: 1, text: '2' },
        { id: 2, text: '3' }
      ]
    }
  })  
  
  var test = new Vue({
    el: '.number',
    methods: {
      addNumber: function () {
        display.display += '1'
    }
  }
  })
  </script>

エラー

vue.js:634 [Vue warn]: Property or method "addNumber" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

(found in <Root>)


Vue warn]: Invalid handler for event "click": got undefined

found in

---> <Threenumbers>
       <Root>

Answer 1

addNumberはthreenumbersに定義されているので、onclickに指定するのはthreenumbersのtemplate内でなければいけません。
今のようにコンポーネントに指定するなら外側のコンポーネント(app)に関数を定義して@onclick.nativeで指定するなどする必要があります。

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div>
  <div id="display-number">
    <input v-model="display" v-bind:placeholder="defaultDisplay">
  </div>
  <div id="keypad">
    <threenumbers v-for="number in numbers" v-bind:number="number" v-bind:key="number.id"></threenumbers>
  </div>
</div>


<script>
  var display = new Vue({
    el: '#display-number',
    data: {
      display: '',
      defaultDisplay: '0312345678'
    }
  })

  Vue.component('threenumbers', {
    props: ['number'],
    template: '<div v-on:click="addNumber">{{ number.text }}</div>',
    methods: {
      addNumber: function() {
        display.display += this.number.text
      }
    }
  })

  var app = new Vue({
    el: '#keypad',
    data: {
      numbers: [{
          id: 0,
          text: '1'
        },
        {
          id: 1,
          text: '2'
        },
        {
          id: 2,
          text: '3'
        }
      ]
    }
  })

</script>

Comments

[Sonono]

なるほど、ありがとうございます！！