javascript - 将 JavaScript 变量传递给根元素上的 vue 组件

Question

我正在尝试将动态 javascript 变量（一个ionRangeSlider()#app值）传递到我元素中的外部 Vue 组件中。但变量在#app元素之外，我不断收到此错误：

[Vue 警告]：属性或方法“范围”未在实例上定义，但在渲染期间被引用。通过初始化该属性，确保该属性是反应性的，无论是在数据选项中还是对于基于类的组件。

我试图通过给它一个默认值来在实例上定义它，如下所示：

const app = new Vue({
    el: '#app',
    data: {'range': [0,2000]}, // Default value
});

它获取组件中的值，但没有获取新的更改值，因为它没有从.ionRangeSlider()实例化和侦听的主文件中获取它。

<div id="app">
    <div class="page-content">
            <filterables 
                    :range="range">
            </filterables>
    </div>  
</div>

<script>
        var range = [];
        $("#b_range").ionRangeSlider({

          type:"double",grid:!0,min:0,max:4e3,from:0,to:2e3,prefix:"$",
          onFinish: function (data) {

            let minRange = data.from;
            let maxRange = data.to;

            range = [minRange ,maxRange ];
            console.log(range);

          }
        });
</script>

我对 Vue 有点陌生，我想知道如何将范围值传递给可过滤组件。任何帮助表示赞赏！

标签： javascriptphplaravelvue.js