0

При изменении значений полей в input.value в поле total ничего не происходит, а по идее должны складываться. Почему нет реактивности и как это исправить?

new Vue({
  el: "#app",
  data: {
		numbers: [5,5,0,0],
    totalNumbers: 0
  },
  computed: {
  	countAll(){
    	return this.numbers.forEach((item) => {
      	this.totalNumbers += item;
      })
    }
  }
})
table {
  width: 100%;
  outline: 1px solid black;
}
tr {
  outline: 1px solid #ccc;
}
td {
  border: 1px dashed green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <table>
    <tr>
      <td>Number</td>
      <td v-for="item in numbers">
        <input type="text" :value="item">
      </td>
      <td>total <span>{{ totalNumbers }}</span></td>
    </tr>
  </table>
</div>

1
  • потому что Вы нигде не используете метод countAll . Чтобы он хоть 1 раз отработал, его нужно где-то использовать..
    – Dmytro
    7 июн 2019 в 8:15

1 ответ 1

1

<input type="text" :value="item"> - этой строкой вы только выводите значение в input. Но при изменении значения - массив numbers не изменяется.

1 вариант

Для этого нужно определить метод, который будет изменять значение текущего input.

<td v-for="(item, index) in numbers">
  <input type="number" :value="item" @input="update($event, index)" />
</td>
methods: {
  update(event, index) {
    this.numbers.splice(index, 1, Number(event.target.value))
  }
}

2 вариант

Либо воспользоваться директивой v-model для двунаправленного связывания данных с элементами форм input, textarea и select.

<td v-for="(item, index) in numbers">
  <input type="number" v-model.number="numbers[index]" />
</td>

Теперь значения в массиве numbers будут обновляться при вводе в input. А модификатор .number у v-model будет автоматически приводить значение к типу Number. Как видно второй вариант попроще, не нужно определять методы в поле methods.

Обратите внимание на numbers[index] - просто записать v-model="item" не даст никакого эффекта для массива, состоящего из примитивов.


Так как у вас уже определено вычисляемое свойство countAll, то вводить промежуточное свойство totalNumbers уже не нужно.

// Отключим ненужные для примера
// сообщения в консоли.
Vue.config.productionTip = false
Vue.config.devtools = false

new Vue({
  el: "#app",
  data: {
    numbers: [5, 5, 0, 0]
  },
  computed: {
    total() {
      // Воспользуемся методом `reduce`.
      // https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
      return this.numbers.reduce((accumulator, current) => accumulator + Number(current))
    }
  }
})
body {
  margin-top: 50px;
}

table {
  width: 100%;
  outline: 1px solid black;
}

tr {
  outline: 1px solid #ccc;
}

td {
  border: 1px dashed green;
}
<div id="app">
  <table>
    <tbody>
      <tr>
        <td>Number</td>
        <td v-for="(item, index) in numbers">
          <input type="number" v-model.number="numbers[index]" />
        </td>
        <td>total <span>{{ total }}</span></td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.