创建动态元素后 List.js 不起作用购买 Vue.js

Question

在尽我所能后，我无法解决这个问题

我有一个项目列表，我必须从 api 中提取，但是当我在获得响应后附加元素但 list.js 不起作用时，它不会从元素中搜索任何东西。
在<div class="search-word" hidden></div> 中，这包含带有连接单词的单词，例如name+' '+title+' '+number

显示错误

未捕获的类型错误：无法读取未定义的属性“childNodes”

这里是 HTML

<input type="text" id="filter_search">
<div id="items">
    <ul class="list list-unstyled">
        <!-- this dynamically created -->
        <li>
            <div class="search-word" hidden></div>
        </li>
        ...
        <li>
            <div class="search-word" hidden></div>
        </li>
        <!-- /this dynamically created -->
    </ul>
</div>

脚本

<script>
    /*========== List Js is Scrtip here ==========*/
    var options = {
        valueNames: ['search-word']
    };

    var items = new List("items", options);

    $(document).on('keypress keyup keydown', "#filter_search", function(){
        items.search($(this).val());
    });


    /*========== Vue Js is Scrtip here ==========*/
    var itemVue = new Vue({
        el: "#items",
        data: { 
            items: []
        },
        created() {
        this.postItems()
      },
        methods:{
            postItems : function() {
                thisData = this
                axios.post('http://...', {
                    _token: token,
                  })
                  .then(function (response) {
                    thisData.items = response.data
                  })
                  .catch(function (error) {
                    thisData.error = error
                  })
            }
        }
    });

</script>

请帮忙...

提前致谢

Answer 1

你可以使用 vue global nextick

Vue.nextTick(function () {
    let list = new List(id, options)
  })