提问人:Adrenaxus 提问时间:7/24/2023 最后编辑:Abdulla NilamAdrenaxus 更新时间:7/24/2023 访问量:57
vue 自定义渲染器中的 Access 变量
Access variable in vue custom renderer
问:
我正在尝试在 Laravel 中实现这个 Vue 词云组件的自定义渲染器: https://github.com/SeregPie/VueWordCloud
我首先使用 php 准备我的单词数组(工作):
@php
$tags = App\Models\Tag::withCount('songs')->orderBy("songs_count", "desc")->take(50)->get();
$words = "";
foreach($tags as $tag)
{
$count = $tag->countSongs();
$words .= "['$tag->name', $count],";
}
@endphp
然后我包括词云(这是有效的)
<vue-word-cloud
style="
height: 480px;
width: 80%;
margin: 0 auto;
"
:words="[{{ $words }}]"
:color="([, weight]) => weight > 40 ? 'Red' : weight > 30 ? 'Orange' : weight > 20 ? 'Seagreen' : weight > 10 ? 'White' : weight > 5 ? 'LightSkyBlue ' : 'White'"
font-family="Nunito"
>
</vue-word-cloud>
但是当我尝试像这样使用自定义渲染器时:(我需要这个来包装每个单词的链接)
<vue-word-cloud
style="
height: 480px;
width: 80%;
margin: 0 auto;
"
:words="[{{ $words }}]"
:color="([, weight]) => weight > 40 ? 'Red' : weight > 30 ? 'Orange' : weight > 20 ? 'Seagreen' : weight > 10 ? 'White' : weight > 5 ? 'LightSkyBlue ' : 'White'"
font-family="Nunito"
>
<template slot-scope="{text, weight, word}">
<div>
@{{ text }} <!-- this is not working, I need a link around the word here -->
</div>
</template>
</vue-word-cloud>
它会产生以下错误:
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
我绝不是 VUE.js 专家,也许我错过了一些微不足道的东西。 如何访问自定义渲染器的“word”变量
答:
评论
slot-scope
v-slot