vue 自定义渲染器中的 Access 变量

Access variable in vue custom renderer

提问人:Adrenaxus 提问时间:7/24/2023 最后编辑:Abdulla NilamAdrenaxus 更新时间:7/24/2023 访问量:57

问:

我正在尝试在 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”变量

PHP laravel vue.js 词云

评论

0赞 Abdulla Nilam 7/24/2023
您使用的是 Vue3 还是 Vue2 ?
1赞 Ali 7/24/2023
如果您使用的是 Vue3,请替换为 .slot-scopev-slot
0赞 Adrenaxus 7/24/2023
我正在使用 Vue3。@Ali,天哪,这解决了我的问题,请将其作为答案发布,我会接受的!谢谢。
0赞 Abdulla Nilam 7/24/2023
@Adrenaxus这就是我要分享的内容 vuejs.org/guide/components/slots.html#scoped-slots
0赞 Adrenaxus 7/24/2023
感谢大家提供有效的修复程序!

答:

1赞 Moritz Ringler 7/24/2023 #1

自 v2.6 起,该语法已弃用。请改用:slot-scopev-slot

<template v-slot="{text, weight, word}">
2赞 Ali 7/24/2023 #2

替换为,它将起作用。 这是参考scope-slotv-slot

评论

1赞 Abdulla Nilam 7/24/2023
你来晚了。
0赞 Adrenaxus 7/24/2023
谢谢你,阿里!不幸的是,我不能接受两个答案,但非常感谢您的努力!
0赞 Ali 7/24/2023
嘿,完全没问题。您的问题已解决,这才是最重要的。