Dropdown list field

đź’» Development
1

Hello,

I’m progressing at my own pace in learning Nextcloud application development, and I’ve run into a problem. Starting with the tutorial: Tutorial: Developing a complete app with a navigation bar and database
I simply want to add a dropdown list field based on “NcSelect”.

I’m trying to adapt the template provided in “ Nextcloud Vue Style Guide but I can’t figure out how to isolate the “Simple” example in the NoteBook’s MyMainContent.vue file (and not in App.vue file as previously stated of course).

I’m open to any suggestions for progressing once I’ve finished the provided tutorials.

Thanks and happy holidays to all.

2

Ultimately, I had more success with “NcRadioGroup” but I remain interested to know why I didn’t succeed with “NcSelect”.

3

Hello @Bernard39,

I tried to understand your problem, but unfortunately, it is not 100% clear to me.

  1. You want to extend the example/tutorial linked (Developing a complete app with nav bar an DB) by some sort of combo-box, correct?
  2. What do you mean by isolate?
  3. Do you by chance have the code of your tests published (e.g. a GitHub repo) so we can have a common look at it?
  4. If not: Can you share what you tried that did not work out as expected? Where did it fail? Were there any error messages (browser log, webpack/vite, …) or warnings?

Looking forward to some more details.
Chris

4

Hello Chris

  1. Yes. I’m trying to add a field of type combo box or radio button (radio buttons are OK on the front end). Basically, a field with constrained values.

  2. For NcSelect, the Vue Style Guide gives several examples, but the code implements a v-for loop. I only need one case.

  3. I haven’t published anything on GitHub yet (I’m a beginner).

  4. As mentioned above, I’m making progress by choosing a radio button this time. The problem I’m encountering now is intercepting the event when I click on one of the radio buttons. I don’t see how to do the equivalent of @update:value=“onUpdateValue”. What event should I intercept and on which component (NcRadioGroup or NcRadioGroupButton)?

Thank you for your valuable help.

5

OK, got it.

I see. This would make things way easier to help you. Just for the future, as the other poeple do not need to craft their own ideas that do not match your mind model.

Yeah, the code examples are not always good for beginners. They are constructed to be as compact and as consistent as possible.

In your template, you will need something like

<template>
  <NcSelect inputLabel="Some name in the label"
    :options="opts"
    v-model="selection" />
</template>

Note the : with options. It makes the value opts interpreted as javascript/Vue expression.

Now, in the script part of your component, you must reflect this. I suspect, you have already a list of possible options. Then, you might need to adopt accordingly. (I assume here you are using Vue 2 or Vue 3 with options API. If this looks really weird to you, you might use Vue 3 with Composition syntax. Then, this needs modification, just tell so)

<script>
import NcSelect from '@nextcloud/vue/components/NcSelect'

export default {
  name: '',
  components: {
    // Make the child components known
    NcSelect, //...
  },
  data() {
    return {
      selection: null,
      //  possible more data entries
    }
  },
  computed: {
    opts() {
      // Just some dummy values
      return ['a', 'b', 'c']
    },
  },
}
</script>

The component will store the selected entry in (prepend this. in script part) selection.

According to the docs, the NcRadioGroup fires the update:modelValue event. Click on the Button (in the docs) labeled Props, Events & Slots.

Chris

6

Thank you so much. I already have a much clearer understanding. My learning project is starting to take shape, and most importantly, I’m beginning to grasp the overall philosophy.

I also see that, as always, I rushed through some steps. I’ll review the fundamentals. And I realize that I happily mixed up @nextcloud-vue8 and @nextcloud-vue9 at times.

Thanks again, and I promise I’ll publish the project on GitHub next time.

1 Like