Q:

How to get a Bind (v-bind) of Input value in another data variable and filter it

How to get a v-bind :value='p.id value to another data variable in Vue Cli, i have got a Array data named something like items, which have been bind in a input like :value='p.id. i need to get those input values in another variable like ItemId. Here is the code 
<template>
   <div class="container">
    <div class="card" v-for="(p, index) in items" :key="index">
        <h4>{{p.title}}</h4>
        <p>{{p.content}}</h4>
        <input type="hidden" name="ItemId" :value='p.id' @input="$emit('ItemId', $event.target.value)" />
     <div class="view">
         <p><span>{{countedData}}</span>....</p>
     </div>
     </div>
   </div>
</template>
<script>
    export default {
    name: "home",
    data() {
      return {
      items: [
      { 'id':1,
        'title':'Sample 1'
        'content':'Sample 1 data goes here' 
       },
     {  'id':2,
        'title':'Sample 2'
        'content':'Sample 2 data goes here' 
       },
     {  'id':3,
        'title':'Sample 3'
        'content':'Sample 3 data goes here' 
       },
      {  'id':4,
         'title':'Sample 4'
     'content':'Sample 4 data goes here' 
       }
      ],
   comments:[
        {
            "id": 1,
            "author": "Admin",
            "body": "Wow Super!",
            "created_on": "2019-12-13T14:30:47.361179Z",
            "post": 1
        },
        {
            "id": 2,
            "author": "Admin",
            "body": "Wow Super! super!",
            "created_on": "2019-12-13T14:32:58.970035Z",
            "post": 1
        },
        {
            "id": 3,
            "author": "Admin",
            "body": "Yes! Super Blog!",
            "created_on": "2019-12-14T09:31:46.031843Z",
            "post": 2
        },
        {
            "id": 4,
            "author": "Admin",
            "body": "Super Super",
            "created_on": "2019-12-14T10:35:55.843957Z",
            "post": 2
        }
        ],
        ItemId:0

        };
      },
    computed: {

commentFilter: function() {
   const PostID = this.ItemId;
   return this.comments.filter(function(el) {
     return el.post === PostID;
   });
 },
},    
</script>

on above code i will get nearly four input with different value, what i need is pass those value to ItemId.  {{countedData}} is the total count that going to get filtering the post.
I just need is to know how to get the input values to ItemId to create a filter and get separate count, which i already bind so i can't use v-model. 

A:

You can pass the same value to a method as a parameter, and work with that from then on.
Just make sure, that the method is called every time data is changed. You could implement a watcher to take care of that.
(Sorry, but your question wasn't exactly clear to me, so I only gave it a shot... :) )

new Vue({
  el: "#app",
  data() {
    return {
      items: [{
          'id': 1,
          'title': 'Sample 1',
          'content': 'Sample 1 data goes here'
        },
        {
          'id': 2,
          'title': 'Sample 2',
          'content': 'Sample 2 data goes here'
        },
        {
          'id': 3,
          'title': 'Sample 3',
          'content': 'Sample 3 data goes here'
        },
        {
          'id': 4,
          'title': 'Sample 4',
          'content': 'Sample 4 data goes here'
        }
      ],
      comments: [{
          "id": 1,
          "author": "Admin",
          "body": "Wow Super!",
          "created_on": "2019-12-13T14:30:47.361179Z",
          "post": 1
        },
        {
          "id": 2,
          "author": "Admin",
          "body": "Wow Super! super!",
          "created_on": "2019-12-13T14:32:58.970035Z",
          "post": 1
        },
        {
          "id": 3,
          "author": "Admin",
          "body": "Yes! Super Blog!",
          "created_on": "2019-12-14T09:31:46.031843Z",
          "post": 2
        },
        {
          "id": 4,
          "author": "Admin",
          "body": "Super Super",
          "created_on": "2019-12-14T10:35:55.843957Z",
          "post": 2
        }
      ],
      ItemId: 0
    };
  },
  methods: {
    commentFilter: function(id) {
      return this.comments.filter(el => {
        return el.post === id;
      })
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="container">
    <div class="card" v-for="(p, index) in items" :key="index">
      <h4>{{p.title}}</h4>
      <p>{{p.content}}</p>
      <input type="hidden" name="ItemId" :value='p.id' @input="$emit('ItemId', $event.target.value)" />
      <p>Comment count: {{commentFilter(p.id).length}}</p>
      <ul>
        <li v-for="comment in commentFilter(p.id)" :key="comment.id">
          <p>Author: {{comment.author}}</p>
          <p>Comment body: {{comment.body}}</p>
        </li>
      </ul>
      <!--<div class="view">
        <p><span>{{countedData}}</span>....</p>
      </div>-->
    </div>
  </div>
</div>

