Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Vue js передать значение в компонент (https://javascript.ru/forum/dom-window/79205-vue-js-peredat-znachenie-v-komponent.html)

SolomonRei 05.01.2020 03:05

Vue js передать значение в компонент
 
Добрый вечер. Подскажите пожалуйста, как передать значение функции в компонент, которое оно возвращает.
Пробую так, возвращает одно true
<template>
  <div id="app">
    <Header
            :questionScore="this.score"
            :questionNumber="this.question_number"
    />
    <Table
            :questionArr="getCorrectQuiz"
            :questionText="getCorrectName"
            v-on:get-unswer="getUnswer($event)"
            v-on:post-query="postQuery()"
    />
  </div>
</template>

export default {
  name: 'app',
  components: {
    Header,
    Table
  },
  props: {
    tempered: {},
    i: {}
  },
  data() {
    return {
      score: 0,
      question_number: 1,
      dataQuiz: [
              {name: 'Как называется самое большое животное ?', id: 1,
        data: [
      {id: 1, text: 'Животное 1', chosen: false, correct: true},
      {id: 2, text: 'Животное 2', chosen: false},
      {id: 3, text: 'Животное 3', chosen: false}

      ]}
      ]
    }
  },
  computed: {
    getCorrectName() {
      this.dataQuiz.forEach((i) => {
        if (i.id === this.question_number) {
          return i.name
        }
      })
      return true
    },
    getCorrectQuiz() {
      this.dataQuiz.forEach((i) => {
        if (i.id === this.question_number) {
          return i.data
        }
      })
      return true
    },
  },
  methods: {
    getUnswer(id) {
      this.dataQuiz.forEach((item) => {
        if (item.id == id && item.chosen === false) item.chosen = true
        else item.chosen = false
        //Решение, если надо выбрать несколько ответов
        // else if (item.id == id && item.chosen === true) item.chosen = false
      })
    },
    postQuery() {
      this.dataQuiz.forEach((item) => {
        if (typeof item.correct !== "undefined" && item.chosen === true) {
            this.score++
          this.question_number++
        }
      })
    }
  }
}


Проблема с функцией getCorrectQuiz
через console.log(данные показываются), делаю return i.data
не фурычит, возвращает true.

я бы убрал return true, но тогда ругается eslint

Aetae 05.01.2020 03:17

К vue js никакого отношения вопрос не имеет. Вы не понимаете что такое forEach и что такое стрелочные функции.

Стрелочные функции - всё равно функции. return же внутри функции влияет только на эту самую функцию и никак ни на что вокруг и снаружи.
forEach - выполняет переданную функцию для каждого элемента массива, и никак не учитывает возврат из этой функции.

Если вы привыкли использовать возврат из циклов - используйте циклы, а не методы массива принимающие функции:
❌  arr.forEach((foo) => {
      return bar
    })


✅  for(let foo of arr) {
      return bar
    }


Часовой пояс GMT +3, время: 07:41.