gpt4 book ai didi

javascript - Vue.js 选择多个元素

转载 作者:搜寻专家 更新时间:2023-10-30 22:59:56 24 4
gpt4 key购买 nike

我正在尝试用 Vue 替换 jQuery,所以在为单个 Vue 实例选择多个元素时遇到了问题。

例如,

我的站点有两个帖子,其中有一个评论表。我想为所有帖子使用 vue 呈现评论表单。

这是 HTML:

<div class="post">
<h1>This is first post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, delectus, vero!
Aut adipisci fuga, dolorem optio sunt mollitia, debitis eius magni totam sint harum provident ipsa,
corporis eligendi dolorum hic!
</p>
<hr>
<div class="vue-commenting"></div>
</div>

<div class="post">
<h1>This is second post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, delectus, vero!
Aut adipisci fuga, dolorem optio sunt mollitia, debitis eius magni totam sint harum provident ipsa,
corporis eligendi dolorum hic!
</p>
<hr>
<div class="vue-commenting"></div>
</div>

但这里的问题是,Vue 只选择了第一个 div.vue-commenting 元素。像这样,

enter image description here正如您在图片中看到的,Vue 只为第一个元素呈现了“添加评论”按钮!

这是我的 Vue 代码:

let app = new Vue( {
el: '.vue-commenting',
template: '#add-comment-template',
data: {
message: 'Commenting going here ...',
visibleForm: false
},
methods : {
ToggleReplyForm: function ( event ) {
event.preventDefault()
this.visibleForm = ! this.visibleForm
}
}
} )

模板代码:

<script type="text/x-template" id="add-comment-template">
<div>
<a
href="#"
class="btn btn-success"
v-on:click="ToggleReplyForm">
Add a comment
</a>
<div class="clearfix"></div>

<br/>

<div
v-if="visibleForm"
class="panel panel-default">

<div class="panel-heading">
Comment Form
</div>
<div class="panel-body">
<div class="form-group">
<label for="un">Name</label>
<input type="text" class="form-control" id="un">
</div>
<div class="form-group">
<label for="uc">Comment</label>
<textarea class="form-control" id="uc" rows="3"></textarea>
</div>
</div>
<div class="panel-footer">
<button
class="btn btn-warning">
Post Comment
</button>
</div>
</div>

</div>
</script>

vue中如何选择多个元素?

最佳答案

您正在向 el 提供一个类,就好像它会为每个匹配的项目创建一个 Vue 实例,但它并不是那样工作的。您应该提供一个包含所有您希望 Vue 控制的元素的元素,或者您应该遍历所有元素并为每个元素创建一个新的 Vue 实例。我强烈建议前者。

关于javascript - Vue.js 选择多个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44764547/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com