vue过滤列表点击

有个小vue项目：codesandbox

带有字段input、虚拟键盘和一些带有id.

当点击对应的数字（虚拟键盘）时，对应的数字应显示在输入字段中，列表应显示item相应的集合（代码id）。

编码：

    <ul class="show">
      <li v-bind:key="i" v-for="i in 4" :class="{on: pinLength>=i}"></li>
    </ul>

    <ul class="key">
      <li>
        <span v-on:click="typePin(1)">1</span>
      </li>
      <li>
        <span v-on:click="typePin(2)">2</span>
      </li>
      <li>
        <span v-on:keyup.51="typeNum(3)">3</span>
      </li> ...
    </ul>

    <ul class="items">
      <li v-for="(item, index) in filterItems" v-bind:key="index">
        {{item.name}}
        <br>
        {{item.id}}
      </li>
    </ul>
  </div>
</template>

脚本：

<script>
export default {
  name: "HelloKey",
  data() {
    return {
      input: "",
      pin: "",
      items: [
        {
          name: "Item 1",
          id: 12345
        }, ...
      ]
    };
  },
  methods: {
    typePin(num) {
      if (this.pin.length < 4) {
        this.pin = this.pin.concat(num);
        this.input = this.pin;
      }
    },
    clearPin() {
      this.pin = "";
    },
    clearCode() {
      this.code = "";
    }
  },
  mounted() {
    this.pin = "";
  },
  computed: {
    pinLength() {
      return this.pin.length;
    },
    filterItems() {
      return this.items.filter(item => {
        console.log(this.input);
        return item.id;
        //return item.id.includes(this.input);
        //return item.id.match(this.input);
      });
    }
  },
};
</script>

我尝试：return item.id.includes(this.input);或return item.id.match(this.input);，但错误是：

item.id.includes 不是函数”

问题：如何通过id 单击“虚拟”键盘并进入表单域来过滤列表？