Блог

Главная - Вопросы по программированию - Как поместить массив данных класса в компонент vue js?

Как поместить массив данных класса в компонент vue js?

#javascript #vuejs2 #vue-component

Вопрос:

У меня object в данных пусто, как :

 data: () => {
  return {
    lines: []
  }
}

и я хочу вставить некоторые массивы из функции, которую я определил в «смонтированном», с помощью такого конструктора:

 function setLine() {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }
  let x1 = localStorage.getItem("x1")
  let y1 = localStorage.getItem("y1")
  let x2 = localStorage.getItem("x2")
  let y2 = localStorage.getItem("y2")
  let stroke = localStorage.getItem("stroke")
  console.log(x1, y1, x2, y2, stroke)
  let lines = [
    new Line(x1, y1, x2, y2, stroke)
  ]
  localStorage.setItem("lines", JSON.stringify(lines))
}

это довольно хорошо работает для добавления одной строки в мое хранилище, но даже если бы я попытался написать :

this.objects = lines , он не обновляет мои объекты в данных…

Кто-нибудь может сказать мне, как я могу это сделать, пожалуйста?

Ответ №1:

Я попытался понять и воспроизвести вашу проблему:

 const localStorageMock = {
  x1: 1,
  y1: 2,
  x2: 3,
  y2: 4,
  stroke: 5,
}

function setLine() {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }

  let x1 = localStorageMock["x1"]
  let y1 = localStorageMock["y1"]
  let x2 = localStorageMock["x2"]
  let y2 = localStorageMock["y2"]
  let stroke = localStorageMock["stroke"]

  const newLine = new Line(x1, y1, x2, y2, stroke)

  let lines = [
    new Line(x1, y1, x2, y2, stroke)
  ]
}

new Vue({
  el: "#app",
  data() {
    return {
      lines: [],
    }
  },
  mounted() {
    this.lines = setLine()
    console.log(this.lines)
  },
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

Приведенный выше фрагмент ничего не меняет, потому setLine() что ничего не возвращает. (Хорошо, он меняет this.lines пустой массив на неопределенный.)

ПРЕДЛОЖЕНИЕ 1

 const localStorageMock = {
  x1: 1,
  y1: 2,
  x2: 3,
  y2: 4,
  stroke: 5,
}

function setLine() {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }

  let x1 = localStorageMock["x1"]
  let y1 = localStorageMock["y1"]
  let x2 = localStorageMock["x2"]
  let y2 = localStorageMock["y2"]
  let stroke = localStorageMock["stroke"]

  const newLine = new Line(x1, y1, x2, y2, stroke)

  let lines = [
    new Line(x1, y1, x2, y2, stroke)
  ]
  return lines
}

new Vue({
  el: "#app",
  data() {
    return {
      lines: [],
    }
  },
  mounted() {
    this.lines = setLine()
    console.log(this.lines)
  },
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

ЕСЛИ ВЫ ХОТИТЕ ДОБАВИТЬ БОЛЬШЕ СТРОК

 const localStorageMock = {
  x1: 1,
  y1: 2,
  x2: 3,
  y2: 4,
  stroke: 5,
}

function setLine(lineArr = []) {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }

  let x1 = localStorageMock["x1"]
  let y1 = localStorageMock["y1"]
  let x2 = localStorageMock["x2"]
  let y2 = localStorageMock["y2"]
  let stroke = localStorageMock["stroke"]

  const newLine = new Line(x1, y1, x2, y2, stroke)

  let lines = [
    ...lineArr,
    new Line(x1, y1, x2, y2, stroke)
  ]
  return lines
}

new Vue({
  el: "#app",
  data() {
    return {
      lines: [],
    }
  },
  mounted() {
    this.lines = setLine() // adding the first line
    this.lines = setLine(this.lines) // adding the second line
    this.lines = setLine(this.lines) // adding the third line
    console.log(this.lines)
  },
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

ПРЕДЛОЖЕНИЕ 2

 const localStorageMock = {
  x1: 1,
  y1: 2,
  x2: 3,
  y2: 4,
  stroke: 5,
}

function setLine({
  x1,
  y1,
  x2,
  y2,
  stroke
}) {
  class Line {
    constructor(x1, y1, x2, y2, stroke) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.stroke = stroke;
    }
  }
  return new Line(x1, y1, x2, y2, stroke)
}

new Vue({
  el: "#app",
  data() {
    return {
      lines: [],
    }
  },
  mounted() {
    this.lines = [
      setLine(localStorageMock),
      setLine(localStorageMock),
      setLine(localStorageMock),
      setLine(localStorageMock),
      setLine(localStorageMock),
    ]
    console.log(this.lines)
  },
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>
Метки: