在 vue-treeselect 组件中解析 json
parse json in a vue-treeselect component
在 https://vue-treeselect.js.org/ 组件中,如何加载 json?我的代码不工作
<html>
<head>
<!-- include Vue 2.x -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
var tree = new Vue({
el: '#app',
data: {
// define the default value
value: null,
// define options
options: function () {
return JSON.parse(this.json);
}
},
})
$.getJSON("my.json", function (json) {
tree.json = json;
});
</script>
</html>
将以下代码放入 mounted
钩子中:
let vm = this;
$.getJSON("https://jsonplaceholder.typicode.com/users", function(json) {
vm.options = json;
});
您应该直接在 ajax 请求的回调中更新 options
属性。
<html>
<head>
<!-- include Vue 2.x -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
var tree = new Vue({
el: '#app',
data: {
// define the default value
value: null,
// define options
options: []
},
mounted() {
let vm = this;
$.getJSON("https://jsonplaceholder.typicode.com/users", function(json) {
vm.options = json;
});
}
})
</script>
</html>
在 https://vue-treeselect.js.org/ 组件中,如何加载 json?我的代码不工作
<html>
<head>
<!-- include Vue 2.x -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@^2"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
var tree = new Vue({
el: '#app',
data: {
// define the default value
value: null,
// define options
options: function () {
return JSON.parse(this.json);
}
},
})
$.getJSON("my.json", function (json) {
tree.json = json;
});
</script>
</html>
将以下代码放入 mounted
钩子中:
let vm = this;
$.getJSON("https://jsonplaceholder.typicode.com/users", function(json) {
vm.options = json;
});
您应该直接在 ajax 请求的回调中更新 options
属性。
<html>
<head>
<!-- include Vue 2.x -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- include vue-treeselect & its styles. you can change the version tag to better suit your needs. -->
<script src="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@riophae/vue-treeselect@^0.4.0/dist/vue-treeselect.min.css">
</head>
<body>
<div id="app">
<treeselect v-model="value" :multiple="true" :options="options" />
</div>
</body>
<script>
// register the component
Vue.component('treeselect', VueTreeselect.Treeselect)
var tree = new Vue({
el: '#app',
data: {
// define the default value
value: null,
// define options
options: []
},
mounted() {
let vm = this;
$.getJSON("https://jsonplaceholder.typicode.com/users", function(json) {
vm.options = json;
});
}
})
</script>
</html>