Блог

В

https://codesandbox.io/s/rmh2n?file=/src/components/NestedDraggable.vue

, в:

 <template>
  <draggable class="dragArea" tag="ul" :list="tasks" :group="{ name: 'g1' }">
    <li v-for="el in tasks" :key="el.name">
      <generic-item :taskItem="el"> </generic-item>
      <p>{{ el.name }}</p>
      <nested-draggable :tasks="el.tasks" />
    </li>
  </draggable>
</template>
 

почему не generic-item выполняется рендеринг el ?

GenericItem :

 <template> 
  <div v-if="taskItemLocal['itemSectionCategoryId']">
    <p>
        Section: {{taskItemLocal['itemSectionCategoryName']}}
    </p>
  </div>
  <div v-else-if="taskItemLocal['itemSectionCategoryItemId']">
    <p>
        Item: {{taskItemLocal['itemSectionCategoryItemName']}}
    </p>
  </div>
  <div v-else>
    Not set
  </div>
</template>
<script>
export default {
  name: "generic-item",
  props: {
    taskItem: {
      required: true,
      type: Object,
      default() {
        return {};
      },
    },
  },
  components: {},
  watch: {
    taskItem: {
      deep: true,
      handler(val) {
        this.taskItemLocal = Object.assign({}, val);
      },
    },
  },
  computed: {
    getTaskItemLocal: {
      get() {
        if (!this.taskItemLocal) {
          return Object.assign({}, this.taskItem);
        }
        return Object.values(this.taskItemLocal);
      },
      set(value) {
        this.taskItemLocal = value;
      },
    },
  },
  data() {
    return {
      taskItemLocal: {
        type: Object,
        default: {},
      },
    };
  },
};
</script>

<style scoped></style>
 

Похоже, это не вычислительная taskItemLocal техника . Этому компоненту придется изменить реквизиты (их нельзя использовать непосредственно в шаблоне). Как я могу «напрямую» скопировать реквизиты в локальную переменную и использовать ее в шаблоне «при первом запуске»?