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

by

1👍

✅

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>
👤muka.gergely

Leave a comment