Relationship between props and data (vue)

  javascript, vue-component, vue.js, vuejs2

In

https://codesandbox.io/s/v9pp6

the ChromePage component passes a prop to InventorySectionC:

<inventory-section-component :itemSectionProps="getItemSection">
</inventory-section-component>

InventorySectionC:

<template>
  <div class="inventory-section-component">
    <draggable v-model="itemSectionProps.itemSectionCategory">
      <transition-group>
        <div
          v-for="category in itemSectionProps.itemSectionCategory"
          :key="category.itemSectionCategoryId"
        >
          <!-- <p>{{ category.itemSectionCategoryName }}</p>  -->
          <inventory-section-group-component :itemSectionGroupData="category">
          </inventory-section-group-component>
        </div>
      </transition-group>
    </draggable>
  </div>
</template>

<script>
import InventorySectionGroupComponent from "./InventorySectionGroupC";
import draggable from "vuedraggable";

export default {
  name: "InventorySectionComponent",
  components: {
    InventorySectionGroupComponent,
    draggable,
    // GridLayout: VueGridLayout.GridLayout,
    // GridItem: VueGridLayout.GridItem,
  },
  props: {
    itemSectionProps: {
      type: Object,
    },
  },
  data() {
    let itemSectionData = itemSectionProps;
    return {
      itemSectionData
    };
  },
};
</script>

<style scoped>
</style>

gives a warning at line:

<draggable v-model="itemSectionProps.itemSectionCategory">

:

Unexpected mutation of "itemSectionProps" prop. (vue/no-mutating-props)eslint

Why (how?) is itemSectionProps mutable?

Can a binding be created between props and data (all draggable samples use a data object:

https://sortablejs.github.io/Vue.Draggable/#/nested-example
https://github.com/SortableJS/Vue.Draggable/blob/master/example/components/nested-example.vue
)?

The idea is to have auto updating, nested, draggable components.

The code as is "works" but there are warnings/errs:

data() can’t seem to see props:

enter image description here

And one more thing, which comes "first"? Data or props? can’t seem to figure it out from the docs:

https://vuejs.org/v2/guide/instance.html

Source: Ask Javascript Questions

LEAVE A COMMENT