问题标签 [v-for]

我正在获取一些原始数据并显示项目列表。每个项目都有一个复杂的属性，我使用方法（不是计算属性）生成。该属性可能会随着用户输入而改变。是否可以根据该属性对列表中的项目进行排序？

HTML：

JavaScript：

因此，每个项目都有一个由全局动态因素“距离”操纵的时间值。这个想法是在“距离”发生变化时自动对项目进行排序，并更新“速度”属性。这可能吗？

我需要使用 v-for 指令遍历一些任务对象。

涉及的vue实例方法：

涉及的数据：

Vue 抱怨说ReferenceError: currentTask is not defined.，好像 v-bind 指令解析没有授予对当前循环范围的访问权限。

我在这里错过了什么吗？这里有某种特殊的语法吗？还是有人已经发现了解决方法？谢谢你。

编辑

这段代码非常好。缺少属性的结束双引号边界，在 dom 树中，导致了一组现在已经消失的错误。

我在 vue.js 中有一个组件，如下所示。

我想显示如下数字

我使用以下代码来执行此操作

代码：

但是这段代码没有做我想做的事情并且不起作用

如何通过增加 5 到 100 到 5 在屏幕上打印？

任何帮助将不胜感激。

谢谢。

绑定时使用v-bind:style效果很好color：

但是，绑定到background-color不起作用：

也不绑定到border-top：

是什么导致它如此有条件地工作？

我正在使用以下代码段来呈现列表：

有没有一种干净的方法可以让我达到v-for与该按钮相关的范围特定任务？
谢谢你。

首先，请原谅糟糕的代码（我们现在没有时间修复）。我知道eval这很可怕，但就我们的目的而言，这是唯一对我们如此轻松的事情。

这是我们添加和删除行的方式：

https://jsfiddle.net/00e58as4/10/6

要重新创建问题，请添加一行。然后，更改新行上的文本。尝试删除倒数第二行 - 注意它不会被删除，但最后一行是。但是，如果您检查作为后端数据实时视图的 json-debug，您会看到正确的行被删除了！

为什么会这样？为什么 UI 和后端不同步？

我正在使用 Vue js 2 在 Laravel 上工作，在挂载方法上我正在创建一个没有问题的多维数组（我可以使用 vue-devtools 查看数据），但我无法使用 v 在我的页面上打印它-为了。

但是，当我动态创建一个简单的数组时，我可以毫无问题地打印它。

我的 Vue 代码：

这就是我要打印的内容，但什么也没显示：

当我更改vDynamicContest为vContest它工作正常时：

挑战：CH1 玩家：p1 p2 p3 p4

挑战：CH2 玩家：p1 p2 p3 p4

挑战：CH3 玩家：p1 p2 p3 p4

打印动态数组也没有问题：

请帮忙！

我正在使用 push 方法修改数组，但在此站点https://vuejs.org/2016/02/06/common-gotchas/他们解释说 vue 不会以这种方式获取数组更改，所以我正在使用按照他们的建议进行拼接，但我仍然无法显示多数组值。

我需要用两个循环 v-for 创建表

但是，如果您将在 virible 'index' 的第二行看到，您会看到这个 var 没有索引值，这个 var 在全局范围内监视。我试着做

<tr v-for="(product, index) in mainOrderFood"> <tr v-for="(toping, i) in product[index]"> </tr> </tr>

但 var 产品与 var index 具有相同的范围

我需要做些什么来渲染数组

mainOrderFood: [ { name: 'name', props: [ {someprops: ''} ] } ]

有这个代码

它基本上是悬停时的弹出窗口。它工作正常，但是当我添加一个新的“标签”时，虽然我看到新标签添加到屏幕上，但悬停不适用于它。

当我查看 vue devtools 时，我可以看到原始标签的真假动态变化，而新标签则没有。虽然，如果我删除 mouseleave 事件并刷新 devtools，我可以看到 tag.pop 确实更改为 true。如果然后我将鼠标悬停在旧弹出窗口和新弹出窗口中的一个上，那么我认为这是一个更改检测问题。

我试图将 mouseenter 更改为 $set(tag,'pop',true)，但一切都以相同的方式运行。我还尝试使用 $set 添加新标签，即使标签被渲染到屏幕上，但仍然没有任何改变。

我不知道还能做什么，有什么建议吗？

编辑：添加新标签的代码：

编辑2：

refs 的初始加载

它也在数据部分中声明。

顺便说一句，我添加了v-for a :key但它没有改变任何东西。

我正在学习 Vue.js，作为练习我正在开发一个 SPA。我通过组件递归地添加一些图标作为 imgs。（为了解决问题，省略了很多代码）

Vue.js

.html

所有图像都正确显示。我想在鼠标悬停图像时开始动画。动画功能工作正常，问题是无论我用鼠标悬停哪个图像，只有第一个会反弹。例如，如果我用鼠标在 img1 上，img1 会弹跳。如果我用鼠标在 img5 上，img1 会弹跳而不是 img5。如何仅对鼠标覆盖的图像进行动画处理？