Vue.js:循环遍历对象时类绑定不起作用
Vue.js是一种流行的JavaScript框架，用于构建用户界面。它采用了组件化的开发方式，使得前端开发更加高效和可维护。在Vue.js中，循环遍历对象时类绑定可能不起作用的原因有以下几种可能性：
- 对象属性未正确定义：确保对象属性在Vue实例的data选项中正确定义。Vue.js只能检测已经存在的属性，如果属性是动态添加的，需要使用Vue.set方法或者直接在data选项中初始化。
- 对象属性未正确绑定：在模板中使用v-for指令进行循环遍历时，确保正确绑定对象属性。例如，使用v-bind指令将对象属性绑定到HTML元素的class属性上。
- 对象属性值未正确更新：如果对象属性的值是响应式的，即在修改属性值后，界面能够自动更新，需要确保使用Vue.set方法或者直接通过赋值的方式修改属性值。Vue.js无法检测到通过索引或者直接修改数组元素的方式进行的修改。
- 对象属性值为非响应式的：如果对象属性的值是非响应式的，即在修改属性值后，界面不会自动更新，可以使用Vue.set方法将属性值转换为响应式的。
总结起来，循环遍历对象时类绑定不起作用可能是由于对象属性未正确定义、未正确绑定、未正确更新或者属性值为非响应式的原因导致的。在解决这个问题时，可以仔细检查代码，确保以上几个方面都正确处理。如果问题仍然存在，可以参考Vue.js官方文档或者在Vue.js的社区中寻求帮助。
关于Vue.js的更多信息和相关产品，你可以参考腾讯云的Vue.js产品介绍页面：Vue.js产品介绍。
相关·内容
2回答
我有一个奇怪的情况，雄辩的模型不会让我更新或破坏，而索引和创建是好的！
我正在使用Vue.js和Laravel资源来进行表单控制，虽然它以前与我一起工作过，但在这里不起作用：
这是我的Vue.js代码：
updateFinish(finish) {
axios.patch(`/api/finishes/${finish.id}`, finish).then(response => {
this.fetchFinishes();
}).catch(error => {
// Get laravel validation error
浏览 0提问于2019-08-16得票数 1
回答已采纳
如何在Elixir中混合复制多个文件？
这不起作用：
mix.copy([
['node_modules/vue/dist/vue.js', 'resources/assets/js/vendor/vue.js'],
['node_modules/vue-resource/dist/vue-resource.js', 'resources/assets/js/vendor/vue-resource.js']
]);
除以下内容之外的任何其他建议：
mix.copy('node_modules/vue/dis
浏览 0提问于2015-08-02得票数 4
我有一个小的Vue.js组件，它显示一个最喜欢的星星图标。单击图标收藏夹/取消收藏夹元素。到目前为止，我只实现了UI部分，如下所示：
<template>
<div :key="favorite">
<a v-on:click="toggleFavorite" style="cursor: pointer">
<i v-show="favorite" class="text-warning fas fa-star"></i>
浏览 0提问于2018-02-22得票数 6
回答已采纳
我想要更改WP7中许多按钮的属性Background。
我可以写这样的代码吗：
Foreach (var item in (this.Content as Panel).Children)
{
If (Element is Button)
{
Element.Background = Color.red;
}
}
但是这不起作用，Element.Background并不存在。
有人知道怎么修吗？
浏览 0提问于2011-10-24得票数 0
我有一个中继器，可以在我的页面上放置充满数据的600+文本框。一个典型的用户会编辑其中的几个。
我希望在我点击保存按钮时运行OnTextChanged事件，但它不起作用。
当我的用户选择保存按钮时，我的所有文本框都具有OnTextChanged="TextBoxChanged"属性
<asp:Button ID="SaveChangesBtn" CssClass="SaveAndNextBtn" runat="server"
Text="Save Changes" onclick=&
浏览 2提问于2012-09-13得票数 1
回答已采纳
我正在使用WordPress和WordPress进行项目主题化vue.js。但现在我不能渲染数据。这是我的密码
app.js
var App = Vue.extend({});
var postList = Vue.extend({
template:'#post-list-template',
data: function(){
return {
posts: ''
}
},
ready: function(){
posts = this.$reso
浏览 3提问于2017-02-21得票数 1
1回答
我正在将Vue.js嵌入到现有的应用程序中。
初始化Vue.js时，如下所示：
new Vue({
el: "#myDomElement",
data: myData,
computed: {
price: function() {
return _this.productPrice();
},
},
created: function() { console.log("Vue created."); },
beforeCompile: function(
浏览 3提问于2016-04-15得票数 2
回答已采纳
2回答
你好，如何使用vue.js和laravel把新的数据推到最上面，我试过了，但还是失败了，我希望有人能帮助解决这个问题。
这是我的控制器
public function addComment()
{
$this->validate(request(), [
'comment' => 'required',
]);
$comment = [
'comment' => request()->comment,
'article_id' =&
浏览 3提问于2020-01-28得票数 0
回答已采纳
我在Vue.js中有一个代码
<li v-for = "record in records" v-bind:key= "record.id">
<div class="collapsible-header"><i class="material-icons">date_range</i><h6>{{record.record_date}}</h6>     <span class=
浏览 0提问于2018-01-12得票数 3
1回答
我为每个div编写了“显示更多”/“关闭”的代码，而且当我打开了一个，然后已经打开一个关闭先打开另一个打开。
问题是，当我在同一个div中按close时，它会重新打开它，而不会关闭它。我还输入了代码.not(this)，但实际上不起作用。问题还在于滚动的功能不太好。
如果我是在第一个div上，而只是小的滚动到第二个，然后按关闭键，它就会在文本的中间跳跃，而不是像它想象的那样在div之上跳跃。
以下是jquery代码：
$('.cities').each(function(){
var max = 7;
var numLi = $(this).find(&
浏览 4提问于2014-05-14得票数 0
回答已采纳
我在这里可能会遇到麻烦--试图让css网格在IE11和Vue.js中工作。 我有一个这样的LI： <li :class="{getClass}">
</li> getClass是一种计算方法： getClass: function () {
return "Row" + this.getMSRow() + "Column" + this.getMSColumn();
}, 在样式表中，我有def。在所有类中： .Row1Column1 {
-ms-grid-column: 1;
-ms-grid-
浏览 18提问于2020-12-07得票数 1
回答已采纳
如何使用v-for模板循环输出对象
new Vue({
el: app,
data: {
output: {
player: [1, 5, 61, 98, 15, 315, 154, 65],
monster: [14, 165, 113, 19, 22],
},
},
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
浏览 5提问于2020-06-28得票数 0
回答已采纳
我正在尝试解析一个相当大的json文件，我开始遇到一些问题。
JSON的一个示例如下
{
"info":"info",
"products":[
{
"name":"HomeScreen",
"screens":[
{
"name":"View Details",
浏览 1提问于2012-03-21得票数 0
回答已采纳
2回答
我想从父组件向动态组件添加数据。
例如：
让我们以一个数字作为数据，我想传递给动态组件。
这个片段的o/p是:
欢迎家长留言！
欢迎5
欢迎5
欢迎5
欢迎5
欢迎5
预期的o/p应该是：
欢迎家长留言！
欢迎1
欢迎2
欢迎3
欢迎4
欢迎5
let dynamicComponent = {
template: `
<p>Welcome {{ msg2 }}</p>
`,
props:['msg'],
data () {
return {
msg2:
浏览 2提问于2020-01-23得票数 0
回答已采纳
我在中看到，您可以在具有options属性的select标记中动态生成option标记，如下所示：
<select v-model="selected" options="myOptions"></select>
但是它在Vue.js 2.0中不起作用，我必须使用v-for指令。这个特性在2.0版中被删除了吗？
浏览 1提问于2018-06-29得票数 1
回答已采纳
3回答
根据，在Vue中声明数据的方式如下：
data: {
name: 'Vue.js'
}
但是，当我这样做时，它不起作用，控制台中显示了一个错误：
The "data" option should be a function that returns a per-instance value in component definitions.
我将其更改为以下内容，然后它运行良好：
data() {
return {
name: 'Vue.js',
}
}
为什么Vue文档在代码不起作用时显示顶部的代码呢？我
浏览 2提问于2019-03-02得票数 0
当代码中提到data-toggle="buttons"时，Vue和Bootstrap之间存在冲突。
这样，按钮的高亮显示就可以了，但是复选框值绑定到的v模型数组不会被更新。
如果删除该代码，所选按钮的高亮显示将不起作用。然而，v-模型开始工作。
如何解决这个问题？
HTML:
<div class="form-group">
<label class="searchLabel">Tool:</label>
<div class="btn-group-toggle" da
浏览 0提问于2019-03-23得票数 0
回答已采纳
是否有一种将输入绑定到对象而不是单个变量的方法。
我知道我们可以做这个简单的把戏
<input v-model="name">
但以下几点不起作用：
<input v-model="user.name">
这就是我习惯的角度，有办法在vue.js中实现这一点吗？
浏览 3提问于2016-12-17得票数 2
回答已采纳
我有一个复选框列表，它不会在循环时更新。
<asp:CheckBoxList ID="cblRoles" runat="server">
</asp:CheckBoxList>
非常简单，后面的代码：
List<ListItem> listRoles = AdminRole.GetRolesList(false);
cblRoles.DataSource = listRoles;
cblRoles.DataValueField = "V
浏览 2提问于2011-10-11得票数 0
回答已采纳
我试图使用javascript (vue.js和node.js)来执行任务列表，其中列表中的元素根据其属性具有不同的颜色。例如，如果列表中的项的属性日期与当前日期相距不到三天，则具有红色背景色，而列表中的项的日期与当前日期相隔三天以上才具有绿色背景色。这有可能做到这一点吗？
浏览 3提问于2022-01-31得票数 0
2回答
我有以下代码：
a = ['bobby', 'freddy', 'jason']
b = ['pep', 'lin', 'cat']
for a in b:
for b in a:
print a,b
我假设在外部循环的第一次迭代之后，由于全局变量b已经被修改，并且现在是长度为1的str，迭代将停止。但它并没有这么做。
输出：
pep p
pep e
pep p
lin l
lin i
lin n
cat c
cat a
cat t
因此，基本的问题是，当创建for循
浏览 1提问于2016-07-17得票数 2
回答已采纳
我在viewmodel上有这样的代码：
self.events = ko.observableArray();
function getAllEvents() {
dataservice.events.getAll()
.then(queryEventsSucceeded)
.fail(queryEventsFailed);
}
function queryEventsSucceeded(data) {
self.events(data.results);
}
function queryEventsFailed(error) {
浏览 2提问于2013-05-18得票数 0
回答已采纳
当输入字段为空且用户试图提交表单而不输入值时，我试图将输入字段设置为红色。当用户试图提交表单而不使用vue.js输入任何值时，字段边框应变为红色。在填写表格之前，表格不应提交。
html
<template>
<div id="border_red">
<input id="name" name="name" v-model="name"/>
<input id="name" name="name" v-model=
浏览 1提问于2021-05-27得票数 1
回答已采纳
1回答
我有一个polygonCrop组件，其中之一有一个具有canvas属性的ref，我在两个按钮组件上使用每个组件作为单独的裁剪函数，所以我想知道如何在Vue.js中使用包含多个组件的多个ref？
<polygonCrop
:canvasClass="'some-class'"
:height="600"
:imageSource="imgSrc"
:showCanvas="show"
:showPointer="showPointer"
:wid
浏览 3提问于2021-01-01得票数 2
1回答
我正在使用matarialize自动完成组件，我需要用存储在vue.js中的数组来设置它的数据
data:{
param:[]
},
mounted(){
this.init();
$('input.autocomplete').autocomplete({
data: {
},
});
},
如何传递jquery函数中存储在vue数据中的param变量？这个数
浏览 2提问于2020-04-26得票数 0
回答已采纳
在我的Vue.js组件中，我想在单击的任何复选框中添加一个背景色：
<div class="langs-container">
<div class="lang">
<input type="checkbox" value="English" class="mycheckbox" v-model="languages">
English
</div>
<div class="
浏览 0提问于2018-09-18得票数 1
回答已采纳
我一直在关注这个youtube教程， (它使用sqlite作为它的数据库)，并且想知道是否有人能告诉我在哪里我可以查看关系数据库？
我可能在这里跳过枪，我只读了教程的第5部分，但我只是在想，如果我能做一些研究，或者有人能引导我走向正确的方向，我想知道我需要做些什么来处理关系数据库。
我曾经涉足Rails，他们有嵌套的表单，我正在尝试使用Vue.js做一个完整的Stack web应用程序，但不确定什么相当于RoR的嵌套表单？
我看到很多人们使用Vue.js和Laravel一起使用的帖子？这是构建完整堆栈的最佳方法吗？还是我应该重新学习RoR并在其中实现Vue.js？
浏览 0提问于2018-01-17得票数 0
如果我使用Vue.js在前端运行post请求，并post具有需要回发的数据的javascript实体模型，这如何映射到控制器中的DTO，我将该实体回发到该控制器中？它是基于属性的名称自动完成的，还是有更多的东西？ this.$http.post(this.apiUrl, this.entity).then(saveCallback, this.dataReadFailure); public virtual async Task<ActionResult> Post([FromBody] CreateUpdateDTO dto) 如果我有类似上面的东西，那么post请
浏览 30提问于2019-02-11得票数 0
回答已采纳
我使用的是Laravel & Vue.js。当我将一些元素附加到页面并使用jQuery Vue.js更改DOM时，像@click & @blur这样的事件将不起作用。 有什么方法可以更新DOM吗？ dropzone_success(file, response) {
$('.dz-details').append('<button type="button" class="thumb_button" id="'+response.path+'" @click="someme
浏览 130提问于2019-02-22得票数 0
1回答
对于数组，vue.js good使用默认的数组方法: push，pop，shift，reverse...但是如何在对象中创建新项并粘贴一些值呢？
new Vue({
el: '#demo',
data: {
items: [
{
start: '12:15',
end: '13:15',
name: 'Whatch Vue.js Laracast',
description: 'Watched the Laracast ser
浏览 0提问于2016-06-25得票数 0
当表单加载时，我想在DataGridView中填充一行。我试过这样做：
public Form1()
{
InitializeComponent();
dataGridView1.DataBindingComplete += dataGridView1_DataBindingComplete;
}
private void dataGridView1_DataBindingComplete(object sender, DataGridViewBindingCompleteEventArgs e)
{
string[] row = new string[] { &#
浏览 3提问于2015-11-08得票数 0
回答已采纳
1回答
我正在尝试用Bulma和Vue.js做一个导航栏，Bulma有这样一个东西，当导航栏折叠到汉堡菜单时，里面的下拉列表已经处于display: block;模式。所以我找到了一个变通方法，但它也将相同的样式应用于所有屏幕尺寸。 然后，我尝试仅在模板中绑定如下样式 <div class="navbar-dropdown" :style="@media screen and (max-width: 900px){display: this.displayBlockAcad}"> 这给了我这个错误 invalid expression: Invalid o
浏览 15提问于2019-02-02得票数 0
我是javascript的新手。
通过阅读示例开始学习Vue.js。
但我对的代码片段感到困惑。
来自
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
我想知道为什么不能这样写代码
data: () => {
return {
msg: 'Welcome to Your Vue.js App'
}
}
我试过这两种代码，结果是一样的。
我无法从阅读Vue.js文档中理解。
请帮助我理解这个代码片段。
谢谢你花时间阅读我的
浏览 4提问于2017-03-24得票数 1
回答已采纳
我是vue.js新手，在此之前我使用的是jquery或js，我正在做的一个项目需要我在点击按钮时动态追加HTML元素，同时将输入值绑定到模型，类似于：
$(".button").click(function() {
$("#target").append("<input type='hidden' name='data' v-model='inputModel' value='1'/>");
});
但是我需要用Vue.js的方式。
下面是我的代码：
data() {
浏览 31提问于2019-05-24得票数 3
回答已采纳
5回答
我刚开始使用Vue.js，我想知道如何显示这个JSON对象：
{
"1": [
"15-16",
"16-17",
"17-18",
"18-19"
],
"2": [
"15-16",
"16-17",
"17-18",
"18-19"
]
}
在具有此结构的列表中：
<
浏览 12提问于2021-11-22得票数 0
回答已采纳
1回答
我第一次尝试vue.js，也是一个初学者javascript程序员。我要通过vue.js
我的html代码是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>React Tutorial</title>
<script src="bower_components/vue/dist/vue.js"></script>
<script
浏览 3提问于2016-01-22得票数 0
回答已采纳
2回答
我的程序是一个windows表单应用程序。我的表单中有多个按钮和一个ListView控件。在ListView1.Text中显示不同信息的每个按钮，并不是所有用户都可以查看所有信息，引用它们的角色。例如，如果用户是学生，他只能看到来自Btn1.Text、Btn2.Text、Btn5.Text的信息，而rest按钮将在ListView1.Text中显示为空。因此，我希望那些在ListView中不显示任何信息的按钮成为不可见的。我该怎么做？谢谢。
浏览 5提问于2015-12-02得票数 0
如何在vue.js应用程序中访问JSON对象
import json from './json/data.json'
加载了JSON文件，现在我必须访问其中的对象
浏览 32提问于2017-08-08得票数 103
回答已采纳
我是Vue.js的新手，我想为我的网站添加一个搜索功能。数据来自API调用，也使用vue.js显示。
显示HTML代码：
<div class="row" v-for="items in data">
<div class="col-lg-4 col-md-6" data-toggle="modal" data-target="#exampleModal" user="'items'" @click="sendInfo(items)&
浏览 0提问于2020-06-12得票数 0
回答已采纳
2回答
我正在循环遍历一个List，并试图将其中一个属性实例化为字符串，但它返回类型：
{Namespace.Collection}
如果我放一个断点，我可以看到它持有我所需要的价值。
如何使它返回值而不是类型？
foreach (var PropertyName in ListName) {
string n = PropertyName.ToString();
}
更新(添加了更多我的代码，并尝试实现建议的解决方案)：
foreach (DataRow dr in ds.Tables[0].Rows) {
//PaidTrips is my ObservableCollection
浏览 3提问于2021-09-27得票数 0
回答已采纳
我对javascript和vue.js有一个问题，它应该很简单，但它不是，我不明白为什么我不能用javascript为元素设置一个高度。以下是我试图更改高度-未透光的TypeError:无法读取属性‘样式’的空值时遇到的一个错误
<template>
<div class="Icontent" id="Icontent" v-bind:mode="this.mode">Content {{this.mode}} </div>
</template>
<script>
expor
浏览 0提问于2018-04-22得票数 0
回答已采纳
我对JavaScript相对来说是个新手。
我在互联网上搜索了一下，发现了人们所称的解决方案、正确的脚本和补丁等等，但似乎没有一个对我有用，所以我显然遗漏了一些东西。已经排除了几个小时了。请帮帮我！
CSS:我创建了一个简单的两列div (在12列中，它是左浮动的)。我有一个CSS转换到位，把它从2%的宽度到15%的宽度(几乎完整的两列)悬停。
HTML:我在div中创建了一些测试链接，我用CSS类隐藏了这些链接。
JS:当鼠标在div上时，我试图使用JavaScript使它们可见。
HTML：
<div id="linkpopout" class="col-2
浏览 0提问于2018-02-25得票数 0
回答已采纳
我有一个迭代数组的方法，并以每个元素作为参数调用其他方法。如果我将此方法声明为：
func didFinishedListFiles(files: [FileModel]) {
for var fileData in files {
self.downloadSingleFile(NSUUID(UUIDString: fileData.uuid!)!);
}
}
Xcode显示了一个警告：
变量“fileData”从未发生变异；请考虑将变量改为“let”常量
但是如果我把var改为let
func didFinishedListFiles(files:
浏览 2提问于2015-11-13得票数 10
回答已采纳
现在，我正在尝试将src从对象获取到我的vue.js组件。
export const Quizzes = [
{
firstWord: "happy",
secondWord: "srećan",
imageSrc: "../assets/happy--women.jpg",
},
]
我的data.js文件如下所示
以及如何在我的Vue.js组件中使用这个
<img class="happy-women" src="../assets/earth.jpg" alt="
浏览 5提问于2022-08-30得票数 0
2回答
我尝试使用Vue.js进行迭代，结果得到如下错误
Vue warn:挂接时出错："TypeError: this.frontImages.forEach不是一个函数“
this.frontImages = {frontA:{name:'frontAName'},frontB:{name:'frontBName'}};
this.frontImages.forEach(function(value, index) {
console.log(value);
}
浏览 7提问于2018-12-06得票数 2
我找到了一个教程，涵盖了Angular的相同功能。代码如下：
openModal() {
document.getElementById('imgModal').style.display = "block";
}
closeModal() {
document.getElementById('imgModal').style.display = "none";
}
plusSlides(n) {
this.showSlides(this.slideIndex += n);
}
currentSlide(n
浏览 0提问于2020-01-15得票数 0
我已经在一个.NET核心mvc项目中实现了vue.js，它将从控制器返回数据。因此，假设结果是：
[{"id":1,"uniqueStr":"string1","ttlValue":"something","hlpValue":"something2"},{"id":2,"uniqueStr":"string2","ttlValue":"something","hlpValue":"
浏览 3提问于2017-01-21得票数 1
回答已采纳
2回答
我能够使用可转换的键值将json数组中的最后一个来宾字典值保存到核心数据中，但是其他的来宾字典值没有保存。来宾现在也是实体的，但我希望将来宾保存为字典，因为这个任务不需要复杂的关系。我确信我正在查看json，reservation.guest =[AnyHashable: Any]?的值类型--任何建议在这里都会有帮助--这是我的json响应，谢谢
注意:对HTTP请求使用Alamofire。也没有包括我的整个班级，因为这是它的主要部分。预订和客人都是NSManagedObject类
let managedObjectContext = CoreDataManager.shared.p
浏览 6提问于2017-04-23得票数 0
回答已采纳
对我来说，这似乎是一个非常简单的问题，但我似乎找不到答案。
我所需要做的就是确定数据库查询返回的对象数量。
具体情况是这样的:我有一个名为Student的模型。此模型有一个名为courses_current的ManyToManyField成员，它与课程模型表相关。当我将我的Student实例传递给一个模板时，我希望能够执行类似以下的操作(语法可能不是很精确，但您将了解基本概念)：
<div id="classes">
{% if student.classes_current.all.size == 0 %}
<h1> HEY! YOU AREN
浏览 0提问于2011-11-07得票数 0
回答已采纳
在将一些对象推送到我的Firebase同步数据库并检索它们之后，我得到以下数组：
(index) products time
-KNOR5bBgf1ilVehk7BI Array[1] "22:26:47"
-KNORdccyvXat8wsP0SF Array[2] "22:29:10"
使用Firebase的.push()时，Firebase会生成一个随机ID，如上面所示。
在尝试用Aurelia循环它们之后(使用repeat.for)
<order-details repeat.for=&
浏览 1提问于2016-07-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
