英文:
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 }} <!-- 这里不起作用，我需要在这里的词周围有一个链接 -->
</div>
</template>
</vue-word-cloud>
它产生以下错误：
[Vue警告]：在渲染期间访问了属性"text"，但在实例上未定义。
我绝不是Vue.js专家，也许我错过了一些微不足道的东西。如何访问自定义渲染器的"word"变量？
英文:
I am trying to implement te custom renderer of this Vue Word Cloud component in Laravel:
https://github.com/SeregPie/VueWordCloud
I first prepare my word array using php (working):
@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
Then I include the word cloud (this is working)
<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>
But when I try to use the custom renderer like this: (I need this to wrap a link around every word)
<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>
It produces the following error:
[Vue warn]: Property "text" was accessed during render but is not defined on instance.
I am by no means a VUE.js expert and maybe I am missing something trivial.
How can I access the custom renderer's "word" variable
答案1
得分: 2
用 v-slot 替换 scope-slot，它就会起作用。
这是参考链接。
英文:
Replace scope-slot with v-slot and it will work.
Here is the reference.
答案2
得分: 1
slot-scope 语法在 v2.6 之后已被弃用。请使用 v-slot 替代：
<template v-slot="{text, weight, word}">
英文:
The slot-scope syntax is deprecated since v2.6. Use v-slot instead:
<template v-slot="{text, weight, word}">
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论