TreeSelect demo fixes

pull/4101/head^2
Tuğçe Küçükoğlu 2023-07-06 17:03:51 +03:00
parent e961e48c81
commit 883b44426c
8 changed files with 51 additions and 25 deletions

View File

@ -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);

View File

@ -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: `

View File

@ -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);

View File

@ -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);

View File

@ -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);

View File

@ -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);

View File

@ -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();

View File

@ -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);