javascript - 如何在另一个数据变量中获取输入值的绑定（v-bind）并过滤它

Question

如何:value='p.id在 Vue Cli 中将 v-bind 值获取到另一个数据变量，我有一个名为 的数组数据items，它已在输入中绑定，例如: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}}是要过滤的总计数post。

我只需要知道如何获取输入值来ItemId创建过滤器并获得单独的计数，我已经绑定了它，所以我不能使用 v-model。

标签： javascriptvue.jsvue-cli

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>