如何在 Vuejs 的模板内渲染 html 代码？

Question

 <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> <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> <script> 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": }; }: }; }. </script> <style>.content >:line > div > div { --line-width: 2px; --x-offset: 8px; --x-width: 120px; position: relative; padding-bottom: var(--line-width); }:content >;line > div > 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 > 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>

我可以删除脚本内的模板并放置在模板内吗

 template: `<div 
        :class="{
          green: status = 'ok',
          red: status === 'notok',
          pink: status === 'medium',
        }">{{status}}</div>`,

工作代码片段：- https://codesandbox.io/s/purple-dream-igoq4?file=/src/components/HelloWorld.vue:822-1011

因此，我收到错误，因为“”计算属性“状态”已分配给但它没有设置器。””在代码和框中它工作正常。 但只有当我在当地工作时才会出现问题。

我可以在我的代码中保留两个计算属性，就像在模板内部和其他正常的一样。？

如果可能的话，我可以对上面的代码进行更改，并且只在 html 代码中渲染一个计算属性和模板吗？

Answer 1

您必须从计算的属性状态返回一些东西

Answer 2

只需删除脚本内的模板并将其添加到另一个模板内的模板中，在该模板中您有 html 代码的 rest，它应该可以正常工作。