- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
HelloWorld.vue
<template>
<div>
<div v-for="box in boxes" :key="box.id">
<BaseAccordian>
<template v-slot:title>{{ box.name }}</template>
<template v-slot:content>
<div
v-for="paint in paints"
:key="paint.id"
class="line"
:class="{
green: paint.status === 'ok',
red: paint.status === 'notok',
pink: paint.status === 'medium',
}"
>
<div>{{ paint.name }}</div>
// only status like ok,not, medium to be printed on line accordingly
</div>
</template>
</BaseAccordian>
</div>
</div>
</template>
<style scoped>
.content > .line > div {
--line-width: 2px;
--x-offset: 8px;
--x-width: 120px;
position: relative;
padding-bottom: var(--line-width);
}
.content > .line > div:before {
content: "";
display: block;
position: absolute;
bottom: 0;
left: var(--x-offset);
width: var(--x-width);
height: 100%;
border-left: var(--line-width) dashed currentColor;
border-bottom: var(--line-width) dashed currentColor;
}
.content > .line > div:after {
content: "";
display: block;
position: absolute;
bottom: calc(-1 * var(--line-width) * 1.75);
left: calc(var(--x-offset) + var(--x-width));
width: 0;
height: 0;
border: calc(var(--line-width) * 2.5) solid transparent;
border-right: 0;
border-left: calc(var(--line-width) * 5) solid currentColor;
}
.green {
color: green;
font-weight: bold;
}
.red {
color: red;
font-weight: bold;
}
.pink {
color: pink;
font-weight: bold;
}
</style>
最佳答案
您对 computed
的使用情况属性不对。
您必须绑定(bind)计算属性 status
, 到 paints
内的每个对象大批。
最好的选择是创建一个单独的组件来显示状态。
我引用了this为您的解决方案实现提供答案。
逻辑
创建组件 StatusComponent
里面 HelloWorld
组件和通行证box
, paint
和 matchingdata
作为它的 Prop 。
所以你的 HelloWorld.vue 组件如下。
模板
<template>
<div>
<div v-for="box in boxes" :key="box.id">
<BaseAccordian>
<template v-slot:title>{{ box.name }}</template>
<template v-slot:content>
<div
v-for="paint in paints"
:key="paint.id"
class="line"
>
<div>
{{ paint.name }}
<StatusComponent :box="box" :paint="paint" :matchingdata="matchingdata" />
<!--only status like ok,not, medium to be printed on line accordingly -->
</div>
</div>
</template>
</BaseAccordian>
</div>
</div>
</template>
脚本
import BaseAccordian from "./BaseAccordian.vue";
export default {
name: "HelloWorld",
components: {
BaseAccordian,
StatusComponent: {
props: ['box', 'paint', 'matchingdata'],
template: `<div
:class="{
green: status === 'ok',
red: status === 'notok',
pink: status === 'medium',
}">{{status}}</div>`,
computed: {
status() {
const box = this.box;
const paint = this.paint;
const matchingdata = this.matchingdata;
let status = "";
if (
box.a == "ok" &&
box.b == "ok" &&
box.c == "ok" &&
box.d == "ok" &&
box.e == "ok" &&
paint.a == "ok" &&
paint.b == "ok" &&
paint.x == "ok" &&
paint.d == "ok" &&
paint.y == "ok" &&
matchingdata.a == "ok" &&
matchingdata.e == "ok" &&
matchingdata.y == "ok" &&
matchingdata.z == "ok"
) {
status = "Ok";
} else if (
box.c == "ok" &&
box.d == "ok" &&
box.e == "ok" &&
paint.x == "ok" &&
paint.d == "ok" &&
paint.y == "ok" &&
matchingdata.e == "ok" &&
matchingdata.y == "ok" &&
matchingdata.z == "ok" &&
(box.a != "ok" ||
box.b != "ok" ||
paint.a == "ok" ||
paint.b == "ok" ||
matchingdata.a != "ok")
) {
status = "medium";
} else if(
box.a != "ok" ||
box.d != "ok" ||
box.e != "ok" ||
paint.x != "ok" ||
paint.d != "ok" ||
paint.y != "ok" ||
matchingdata.e != "running" ||
matchingdata.y != "ok" ||
matchingdata.z != "ok"
) {
status = "notok";
}
return status;
}
}
}
},
data() {
return {
// status: ["ok", "notok", "medium"],
boxes: [
{ id: "1", price: "12", name: "apple", a: "ok", b: "ok", c: "ok", d: "ok", e: "ok" },
{ id: "2", price: "11", name: "bananna", a: "ok", b: "ok", c: "ok", d: "close", e: "ok"},
{ id: "3", price: "10", name: "grapes", a: "ok", b: "ok", c: "ok", d: "close", e: "ok" },
{ id: "4", price: "9", name: "choc", a: "ok", b: "ok", c: "ok", d: "close", e: "ok",},
{ id: "5", price: "8", name: "chips", a: "ok", b: "ok", c: "ok", d: "close", e: "ok", },
{ id: "6", price: "7", name: "kat", a: "ok", b: "ok", c: "ok", d: "close", e: "ok",},
],
paints: [
{id: "1",price: "100",name: "assian",a: "ok",b: "ok",x: "ok",d: "ok",y: "ok",},
{id: "2",price: "101",name: "vvv",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
{id: "3",price: "102",name: "zcx",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
{id: "4",price: "103",name: "aaa",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
{id: "5",price: "104",name: "bbb",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
{id: "6",price: "105",name: "asdf",a: "ok",b: "ok",x: "ok",d: "close",y: "ok",},
],
matchingdata: {
a: "ok",
e: "ok",
y: "ok",
z: "ok",
},
};
},
};
最终实现
关于javascript - 如何在 Vuejs 中为 v-for 中的数组值设置条件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70136714/
我试图将我的 VueJS 组件中的某些内容发送到位于包含该组件的 html 页面中的函数。我是否遗漏了什么,或者这是不可能的? 在我的组件中作为方法: insert: function(){
完全遵循 docs的语言说明,我正在尝试以德语格式显示日期。相反,我仍然看到它是英文的:“12 Apr 2020”。 也尝试使用西类牙语,仍然得到“2020 年 4 月 12 日”。 我错过了什么吗?
我想从 Chart 对象访问 getValue 方法,但我得到的函数未定义。 import Vue from 'vue'; import C
我正在使用 laravel-vuejs 应用程序。当 vuejs 渲染 css 时,它会在 html head 中附加一些样式标签,如下图所示。有什么办法可以隐藏这个标签吗?我认为可以通过添加一些插件
我正在为 VueJS 创建一个加载栏插件,我想使用该插件控制 VueJS 组件(插件的一部分)的数据。 所以,最后我想做以下事情: 在 main.js 中包含插件 import VueLoadingB
如何使用 VueJs 和 VueJS-Router 为 Pimcore 进行扩展? 到目前为止,前端的 vuejs 没有任何问题……但我无法让 VueJs-Router 运行。 有人有在 pimcor
也许你可以成为我一天的救世主。 我正在尝试为我的扩展实现 vue-components。 我不能包含自定义 Vue.js 组件。我关注了https://pagekit.com/docs/develop
我是 Laravel 和 VueJS 的新手,对于困惑的代码提前深表歉意。 我一直在尝试制作一个注册表单,并将 VueJS 集成到 laravel 中以使其更具动态性。现在我一直在尝试使用 {{ }}
我想使用函数作为数据属性。这似乎在“works”数据属性的情况下工作得很好。但是我需要函数中的 this 上下文,以便我可以计算存储在 this.shoppingCart (另一个属性)中的值。 这可
我正在尝试从另一个方法调用一个方法,为此我使用了它。但是我的控制台导致我出错。 如何在 Vuejs 中调用另一个方法中的方法? 代码 methods: { searchLocations:
我已经使用 webpack_loader 创建了 Django 和 VueJS 集成项目。Django 在本地主机 8000 上运行,而 VueJS 在 8080 端口上运行。但是端口 8000 在控
我正在学习如何通过 udemy 类(class)制作单页应用程序,同时尝试做一个大学项目。问题是,在我的 Controller 中,我将数据库查询作为 json“alunos”发送到前端。现在,在 V
我有一个带有一些 html 的#app 容器,我在#app 上创建了 Vue 实例,所有内容都被编译并转换为 Vuejs 组件。然后我在另一个 html 字符串中使用 ajax,我需要以某种方式将其编
我有一个 symfony 2.8 应用程序,我最近集成了 VueJs 2 作为我的前端框架,因为它提供了很大的灵 active 。我的应用程序不是单页的,我使用 symfony Controller
好吧,我遇到了一个问题,虽然是一个奇怪的问题,但我到处都找不到答案。 我们被指派用 Vue.js 创建一个购物车,我已经完成了我自己开始了这个项目,想看看我能用 vuejs 做什么。问题出现在页面加载
逻辑 我有带有输入作为标签的复选框,其值来自数据库,因此文本(值)已经存在。 (完成) 我想列一份检查项目 list (完成) 我想如果我改变了一个项目的值得到改变的值,但它仍然给我数据库的值(需要帮
我正在尝试在页面上显示公告列表(从 API 检索)。我正在使用 Vuex 商店,我有一个名为 announcements 的状态。我还希望每次用户刷新/进入页面时更新此列表。所以我使用了生命周期钩子(
使用单文件模板,我希望有一个按钮,如果数组为空,则显示“单击此处”,如果数组已填充,则显示值。 ajax 工作正常并且对象正在更新,但按钮不会重新呈现。我在这里做错了什么? Mobil
在 VueJS 中,有没有办法在模板或脚本中将字符串插入字符串?例如,我希望以下内容显示 1 + 1 = 2 而不是 1 + 1 = {{ 1 + 1 }}。 {{ myVar }}
我在我的项目中使用 VueJS 2,我意识到我的构建部署很糟糕。 这是我在 github 上部署我的 VueJS 构建的脚本: #!/usr/bin/env sh # abort on errors
我是一名优秀的程序员,十分优秀!