Simple behaviour

vue-core

#1

Hello every one
I am a very new here as weel as for vuejs

I have a simple code like:

const xurl = 'https://www.someserver.com/';
new Vue({
  el: '#app',
    data: {
      
      coreMenuActive:'prov',
      coreMenuData: [{id:'1', name:'componentA'},
              {id:'2', name:'componentB'},
              {id:'3', name:'componentC'},
              {id:'4', name:'componentD'}]
  },
  computed: {
    getCurComp: function () {
      return this.coreMenuActive.toLowerCase() + '-list'
    }
  },
  methods: {
    setActiveCoreElem: function(n){
      this.coreMenuActive = n;
    }
  }
});

in html I state the component like this
<component v-bind:is="getCurComp"></component>

I understand it’s a dynamic component which depends on “getCurComp” value

The whole app html code looks like this:


    </div>
    <div class="center">
      <div class="coreMenu">
        <div v-for="el in coreMenuData" :class="[el.id, el.id == coreMenuActive ? 'active' : '']" :title="el.name"
             @click="setActiveCoreElem(el.id)"></div>
      </div>
      <component v-bind:is="getCurComp"></component>
    </div>
</div>

The this is I have a menu and on page load the first one should be activated and run it’s component.

the component code would be something like this:

Vue.component('componentA-list', {
  props: {
    data:[]
  },
  mounted() {
    var str = 'getCompData';
    axios.post(xurl+str).then(response => {
      this.data = [response.data];
    })
  },
  template: `<div class="coreContent">
               <div class="pan">
                  <ul>
                    <li v-for="el in this.data">{{el.name}}</li>
                  </ul>
               </div>
             </div>`
});

I have an error note:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop’s value. Prop being mutated: “data”

I have read articles in the net but did not get a clear answer with example what to do to avoid it?

Thank you so much for help
Nick


#2

Please, let me know if this approach is right

Vue.component('componentA-list', {
  data: function(){
    return {
      data:[]
    }
  },
  mounted() {
    var str = 'getCompData';
    axios.post(xurl+str).then(response => {
      this.data = [response.data];
    })
  },
  template: `<div class="coreContent">
               <div class="pan">
                  <ul>
                    <li v-for="el in this.data">{{el.name}}</li>
                  </ul>
               </div>
             </div>`
});

Thank you