如何在Vue Cli中将v-bind :value='p.id
值绑定到另一个数据变量,我得到了一个名为items
之类的Array数据,这些数据已绑定在诸如: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模型。
您可以将相同的值作为参数传递给方法,然后从此开始使用它。
只需确保每次数据更改时都调用该方法。您可以实现watcher来解决这个问题。
(对不起,但是您的问题对我来说并不十分清楚,所以我只给了他一个机会……:))]]
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>