TreeSelect demo fixes
parent
e961e48c81
commit
883b44426c
|
@ -14,6 +14,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { NodeService } from '/service/NodeService';
|
import { NodeService } from '/service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -30,6 +31,8 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -51,6 +54,7 @@ export default {
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
const nodes = ref(null);
|
const nodes = ref(null);
|
||||||
const selectedValue = ref(null);
|
const selectedValue = ref(null);
|
||||||
|
|
|
@ -15,6 +15,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { NodeService } from '/service/NodeService';
|
import { NodeService } from '/service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -34,39 +35,42 @@ export default {
|
||||||
<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />`,
|
<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />`,
|
||||||
options: `
|
options: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
|
<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
nodes: null,
|
nodes: null,
|
||||||
selectedValue: null,
|
selectedValue: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
NodeService.getTreeNodes().then((data) => (this.nodes = data));
|
NodeService.getTreeNodes().then((data) => (this.nodes = data));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\/script>`,
|
<\/script>`,
|
||||||
composition: `
|
composition: `
|
||||||
<template>
|
<template>
|
||||||
<div class="card flex justify-content-center">
|
<div class="card flex justify-content-center">
|
||||||
<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
|
<TreeSelect v-model="selectedValue" :options="nodes" selectionMode="checkbox" placeholder="Select Item" class="md:w-20rem w-full" />
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
const nodes = ref(null);
|
const nodes = ref(null);
|
||||||
const selectedValue = ref(null);
|
const selectedValue = ref(null);
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
NodeService.getTreeNodes().then((data) => (nodes.value = data));
|
NodeService.getTreeNodes().then((data) => (nodes.value = data));
|
||||||
});
|
});
|
||||||
<\/script>`,
|
<\/script>`,
|
||||||
data: `
|
data: `
|
||||||
|
|
|
@ -26,6 +26,8 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -47,6 +49,7 @@ export default {
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
const nodes = ref(null);
|
const nodes = ref(null);
|
||||||
const selectedValue = ref(null);
|
const selectedValue = ref(null);
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { NodeService } from '/service/NodeService';
|
import { NodeService } from '/service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -33,6 +34,8 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -56,6 +59,7 @@ export default {
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
const nodes = ref(null);
|
const nodes = ref(null);
|
||||||
const selectedValue = ref(null);
|
const selectedValue = ref(null);
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import { NodeService } from '/service/NodeService';
|
import { NodeService } from '/service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -26,16 +27,18 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
nodes: null,
|
nodes: null,
|
||||||
selectedValue: null,
|
selectedValue: null,
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
NodeService.getTreeNodes().then((data) => (this.nodes = data));
|
NodeService.getTreeNodes().then((data) => (this.nodes = data));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
<\/script>`,
|
<\/script>`,
|
||||||
composition: `
|
composition: `
|
||||||
|
@ -47,6 +50,7 @@ NodeService.getTreeNodes().then((data) => (this.nodes = data));
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
const nodes = ref(null);
|
const nodes = ref(null);
|
||||||
const selectedValue = ref(null);
|
const selectedValue = ref(null);
|
||||||
|
|
|
@ -38,6 +38,8 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -59,6 +61,7 @@ export default {
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
const nodes = ref(null);
|
const nodes = ref(null);
|
||||||
const selectedValue = ref(null);
|
const selectedValue = ref(null);
|
||||||
|
|
|
@ -67,6 +67,7 @@ export default {
|
||||||
import { useToast } from 'primevue/usetoast';
|
import { useToast } from 'primevue/usetoast';
|
||||||
import { useField, useForm } from 'vee-validate';
|
import { useField, useForm } from 'vee-validate';
|
||||||
import { NodeService } from '@/service/NodeService';
|
import { NodeService } from '@/service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
setup() {
|
setup() {
|
||||||
const { handleSubmit, resetForm } = useForm();
|
const { handleSubmit, resetForm } = useForm();
|
||||||
|
|
|
@ -60,6 +60,8 @@ export default {
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
@ -93,6 +95,7 @@ export default {
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, onMounted } from 'vue';
|
import { ref, onMounted } from 'vue';
|
||||||
|
import { NodeService } from './service/NodeService';
|
||||||
|
|
||||||
const nodes = ref(null);
|
const nodes = ref(null);
|
||||||
const selectedValue = ref(null);
|
const selectedValue = ref(null);
|
||||||
|
|
Loading…
Reference in New Issue