App Development: Problems with Vue

💻 Development
1

hi there, i’m fiddling with writing an app for nextcloud but i’m stuck on one issue i fail to solve:

App.vue:

<template>
    <NcAppContent>
        <div>
            <table>
                <thead>
                    <tr>
                        <th>Description</th>
                        <th>Status</th>
                        <th>Deactivation Time</th>
                        <th />
                        <th>Activate for</th>
                        <th />
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="{ rule } in rules"
                        :key="rule.id"
                        class="internetaccess_address">
                        <td>{{ rule.description }}</td>
                        <td :class="[rule.status ? icon-play : icon-close, shaded]" />
                        <td>{{ rule.eventtime }}</td>
                        <td class="icon-close" />
                        <td />
                        <td class="icon-play" />
                    </tr>
                </tbody>
            </table>
        </div>
    </NcAppContent>
</template>

<script>
import NcAppContent from '@nextcloud/vue/dist/Components/NcAppContent.js'
import { loadState } from '@nextcloud/initial-state'

export default {
    name: 'App',
    components: {
        NcAppContent,
    },
    data() {
        return {
            rules: loadState('ui_internetaccess', 'rules-initial-state'),
        }
    },
    mounted() {
        console.log(this.rules)
    },
}
</script>

<style scoped lang="scss">
#ui_internetaccess {
    display: flex;
    justify-content: center;
    margin: 16px;
}
</style>

while console.log(this.rules) in mounted puts out the correct data in the browser’s console the view does not render claiming that

Property or method “rules” is not defined on the instance but referenced during render.

the provided link doesn’t help me much because it tells me to declare rules in the data-section which i obviously have…

any pointers are highly appreciated!

3

I am a bit curious about the syntax { rule } in rules, how does rules look like (from the initial state)? I would have guessed it should just be rule in rules but this depends on the entries.

You could as well

  1. Avoid rendering of the tr by commenting out and checking this is actually the culprit.
  2. Use the browser dev tools (with Vue extension installed) to check that the data is actually in the component registered and has the expected structure.

Chris

4

Also, your class rules for the status field seem off. But, I am not sure what you expect there to happen, to be honest.

Here is what I tried out: Link to Vue SFC Playground

5

@christianlupus thanks a lot! you pointed me in the right directions and i found the mistake in the data apparently not being in the right format after all…

1 Like