javascript - 如何在另一个数据变量中获取输入值的绑定(bind)(v-bind)并对其进行过滤

Question

如何在 Vue Cli 中将 v-bind :value='p.id 值获取到另一个数据变量，我有一个名为 items 的数组数据，它们已绑定(bind)在 :value='p.id 这样的输入中。我需要在另一个变量(如 ItemId)中获取这些输入值。这是代码

<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>

在上面的代码中，我将获得近四个具有不同值的输入，我需要的是将这些值传递给 ItemId。 {{countedData}} 是要过滤帖子的总计数。

我只需要知道如何获取 ItemId 的输入值来创建过滤器并获取单独的计数，我已经绑定(bind)了该计数，因此无法使用 v-model。

Answer 1

您可以将相同的值作为参数传递给方法，并从此开始使用它。

只需确保每次数据更改时都会调用该方法。您可以实现一个观察者来处理这个问题。

(抱歉，但你的问题对我来说不太清楚，所以我只是试了一下......:))

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>