Использование пользовательских объектов модели в качестве поставщика для v-for в Vue? - PullRequest
Новая
       36

Использование пользовательских объектов модели в качестве поставщика для v-for в Vue?

0 голосов
/ 12 апреля 2020

плохо знакомы с Vue - я узнаю от I go об исследовании.

Я пытаюсь использовать пользовательский объект в качестве источника данных для ситуации v-for. Пока что не работает - признаюсь, я не уверен, как получить доступ к данным по имени в Vue компоненте.

main. js

import Vue from "vue";

import App from "./App.vue";
import router from "./router";
import store from "./store";
import VueKonva from "vue-konva";
Vue.use(VueKonva);

import RoomBuilder from "@/model/RoomBuilder";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App),
  data: () => ({
    roomBuilder: new RoomBuilder()
  })
}).$mount("#app");

Пользовательский объект, который не может быть подключен прямо к провайдеру данных, это roomBuilder.

Затем в компоненте, где я хочу сослаться на этот объект, у меня есть этот код: 

<template>
  <v-stage ref="stage" :config="stageSize">
    <v-layer>
      <v-rect ref="background" :config="backgroundConfig"></v-rect>
      <v-rect
        v-for="room in roomBuilder.getRooms()"
        :key="room.id"
        :config="room.config"
      ></v-rect>
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  name: "RoomGrid",
  data() {
    return {
      stageSize: {
        width: 1000,
        height: 1000
      },
      backgroundConfig: {
        width: 50,
        height: 50,
        fill: "#2B2B2B"
      }
    };
  },
  mounted() {
    this.$nextTick(function() {
      window.addEventListener("resize", this.fitStageIntoParentContainer);
      this.fitStageIntoParentContainer();
    });
  },
  methods: {
    fitStageIntoParentContainer() {
      const parentElement = this.$parent.$el;
      const background = this.$refs.background.getNode();
      background
        .setAttr("width", parentElement.clientWidth)
        .setAttr("height", parentElement.clientHeight);
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss"></style>

Два POJO:

RoomBuilder. js

import Room from "@/model/Room";

class RoomBuilder {
  construct() {
    this.rooms = [new Room(1)];
  }

  drawOnto(konvaStage) {
    console.log(konvaStage);
  }

  getRooms() {
    return this.rooms;
  }
}

export default RoomBuilder;

и

Комната. js

class Room {
  construct(id) {
    this.id = id;
    this.config = {
      x: 10,
      y: 10,
      fill: "white",
      width: 10,
      height: 10
    };
  }
}

export default Room;

Спасибо, и go легко для меня. Я обычно парень на стороне сервера! Я явно подключил что-то не так ... попробовал

v-for = "комната в этом. $ Data.roomBuilder.getRooms ()"

v-for = "комната в roomBuilder. getRooms () "

et c.

Очевидно, что есть некоторые волхвы c в движении, я не понимаю!

Спасибо!

...