Как правильно вывести результат математической функции для свойства данных в цикле v-for в VueJS? - PullRequest
Новая
       14

Как правильно вывести результат математической функции для свойства данных в цикле v-for в VueJS?

1 голос
/ 09 мая 2019

Я работал над игрой в кости в Vue как часть игры. Я перебираю типы кубиков с помощью v-for, чтобы создать набор кнопок и связанный div, который будет отображать результат. Проблема в том, что, хотя мои журналы консоли верны, я не могу заставить свой rollResult обновляться там, где его следует интерполировать. Я включил только необходимый код, чтобы сохранить все ваши глаза. Если я могу предоставить больше, пожалуйста, дайте мне знать. Заранее спасибо!

HTML: 

<v-list-tile v-for="die in dice" :key="die.name">
...
 <template v-slot:activator="{ on }">
      <v-btn class="primary" @click="rollDice(die.sides)">Roll</v-btn> 
          <div>{{rollResult}}</div>
</template>
...
</v-list-tile>

Данные: 

      rollResult: 0,
      dice: [
        { sides: 4 },
        { sides: 6 },
        { sides: 8 },
        { sides: 10 },
        { sides: 12 },
        { sides: 20 }
      ],

Функция: 

    rollDice: function(n) {
     let rollResult = Math.ceil(Math.random() * n);
        console.log(rollResult);
    }

1 Ответ

1 голос
/ 09 мая 2019

Вы создаете локальную переменную, а не изменяете состояние (data). Использование: 

rollDice: function(n) {
    this.rollResult = Math.ceil(Math.random() * n);
    console.log(this.rollResult);
}

Демо-версия: 

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    rollResult: 0,
    dice: [
      { sides: 4 },
      { sides: 6 },
      { sides: 8 },
      { sides: 10 },
      { sides: 12 },
      { sides: 20 }
    ],
  },
  methods: {
    rollDice: function(n) {
        this.rollResult = Math.ceil(Math.random() * n);
        console.log(this.rollResult);
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="die in dice" :key="die.name">
    <button class="primary" @click="rollDice(die.sides)">Roll {{ die.sides }}</button>
    <div>{{rollResult}}</div>
  </div>
</div>

Если вам нужны невидимые результаты, превратите rollResult в массив (или объект) и следите за некоторыми предостережениями (например, используя Vue.set()): 

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!',
    rollResult: [0, 0, 0, 0, 0, 0],
    dice: [
      { sides: 4 },
      { sides: 6 },
      { sides: 8 },
      { sides: 10 },
      { sides: 12 },
      { sides: 20 }
    ],
  },
  methods: {
    rollDice: function(n, index) {
        Vue.set(this.rollResult, index, Math.ceil(Math.random() * n));
        console.log(this.rollResult);
    }
  }
})
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div v-for="(die, index) in dice" :key="die.name">
    <button class="primary" @click="rollDice(die.sides, index)">Roll {{ die.sides }}</button>
    <div>{{rollResult[index]}}</div>
  </div>
</div>
...