[Vuejs]-Vue JS Using local variable without defining in data() function

2👍

Below we will render using a computed property to make sure its sorted alphabetically and then render your first char. Though You should be using grouping imo.

<template>
    <ul>
        <div v-for="(list, index) in sortedlist" :key="`people_${index}`">
           <div v-if="!isFirstCharSame(list.label)" >{{ firstChar }} </div>
            <li>
              <span>{{ list.label }}</span>
            </li> 
         </div> 
    </ul> 
</template>
<script>
export default {
    data() {
      return {
        itemlist: [
            {"label":"Alpha"},
            {"label":"Beta"},
            {"label":"Charlie"},
            {"label":"Delta"},
        ],
        firstChar: '',
      };
    },
    methods: {
        isFirstCharSame(char) {
            if (str.startsWith(this.firstChar)) {
                return true;
            }
            this.firstChar = str.charAt(0);
            return false;
        },
    },
    computed: {
        sortedList() {
            return this.itemList.sort((a, b) => {
                if (a.label > b.label) {
                    return 1;
                }
                if (b.label > a.label) {
                    return -1;
                }
                return 0;
            });
        },
    },
};
</script>

And yes, You can update your data any time you wish and the component will do a re render to reflect it.

1👍

You can declare variables in your component within your methods or inside computed properties, etc., but they won’t be reachable from the template or the rest of the code nor they would be reactive.

The only way for them to be reactive and reachable from the higher scope is adding the data property to the component in the following way:

data: function () {
    return {
      foo: 'bar'    
    }
  },

or

data () {
    return {
      foo: 'bar'    
    }
  },

Besides this, the reason of your error is that you are mutating the state of your variables inside the render. When this happens, Vue re-renders the template because the values have mutated and calls again to the function and voilà: there you have an infinite loop.

You should probably check the function you are calling and try to replace the changing variables from the data property with local variables that take their data from the actual data variables.

Leave a comment