json - Bootstrap Tokenfield 显示空标签列表。Laravel 应用程序

Question

我有自动完成的问题。

首先我得到一个带有标签的数组：

  var tagsList = @json(\App\Helpers\Clients::getTags());

接着：

    $('#tags').tokenfield({
         beautify:false,
         autocomplete: {
              source: [tagsList],
              delay: 100
         },
        showAutocompleteOnFocus: true
     });

此代码工作正常。控制台没有错误。但是将标签列表显示为空！

如果我通过静态列表更改 tagList，则可以正常工作：

   $('#tokenfield').tokenfield({
       autocomplete: {
       source: ['red','blue','green','yellow','violet'],
       delay: 100
       },
      showAutocompleteOnFocus: true
      });

控制台调试正确显示列表：

但在应用程序中只显示这个（重复，没有错误控制台）：

看起来 css 不起作用，但每个 css 都正确链接。

知道发生了什么吗？¿

console.log(tagsList) 抛出：

此致。

Answer 1

tokenfieldssource属性需要一个数组，但您正在向它传递一个对象。

问题是您没有顺序数组，因此@json无法将其转换为数组，而是将其转换为对象。

解决方案 1

将输出 from 转换\App\Helpers\Clients::getTags()为顺序数组。

解决方案 2

获取JS中的对象值并将其传递给source

$('#tags').tokenfield({
    beautify:false,
    autocomplete: {
        source: Object.values(tagsList),
        delay: 100
    },
    showAutocompleteOnFocus: true
});

Answer 2

@华金

你只对你的源属性使用数组怎么样？

   $('#tokenfield').tokenfield({
        autocomplete: {
        source: Object.values(taglist),
        delay: 100
       },
      showAutocompleteOnFocus: true
   });