Почему Vue не реагирует в этом сценарии?

Question

Я собрал простой пример, который демонстрирует проблему с реактивным обновлением Vue.

В основном у меня есть таблица кнопок. Когда пользователь нажимает на одну из этих кнопок в первый раз, эта кнопка будет иметь инициализированные данные для нее, и для кнопки будет установлено значение «выбрано». Когда пользователь начинает вводить текст в поле ввода, выбранная кнопка будет отображать текст полей ввода в режиме реального времени.

Однако, хотя данные изменились и значение для этой кнопки было обновлено, оно не отражается в пользовательском интерфейсе. В частности, кажется, что метод getCell () больше не вызывается при изменении данных, связанных с кнопкой.

<v-card v-if="getCell(curCol.id, curRow)">

Если предположить, что структура данных остается неизменной, я упускаю что-то очевидное в уведомлении Vue что данные изменились и для повторного рендеринга?

https://codepen.io/uglyhobbitfeet/pen/GRgWXga

• Я предоставил консольные операторы в примере кода, чтобы быстро помочь показать, что происходит

Answer 1

Возможно, вы немного усложнили вещи. Свойства computed предназначены для подобных вещей.

Таким образом, вместо того, чтобы динамически добавлять эти ячейки, используя Vue.set каждый раз, вы можете создавать эти "элементы" (или список ячеек), используя преимущества реактивности computed.

Посмотрите следующий пример. Другой «magi c» - это часть вычисляемого сеттера , где он устанавливает текущий активный текст кнопки:

new Vue({
  el: '#app',

  data: () => ({
    cols: [
      { id: 'a' },
      { id: 'b' },
      { id: 'c' }
    ],
    numRows: 2,
    selectedCell: {
      text: ''
    }
  }),

  computed: {
    inputText: {
      get() {
        return this.selectedCell.text;
      },
      set(value) {
        this.selectedCell.text = value;
      }
    },

    items() {
      return Array
        .apply(null, { length: this.numRows })
        .map(() => {
          return this.cols.map(col => ({
            cellId: col.id,
            text: 'default text'
          }))
        });
    }
  },

  methods: {
    setActive(col) {
      this.selectedCell = col;
    }
  }
})

.input-container {
  text-align: center;
}

table {
  margin: 1rem auto;
}

button.active {
  background-color: lightgreen;
}

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

<div id="app">
  <div class="input-container">
    <label>Click a Button, Then Type Some Text Here</label><br />
    <input v-model="inputText" ref="text" />
  </div>

  <table>
    <tbody>
      <tr v-for="(cols, index) of items" :key="index">
        <td v-for="col of cols" :key="col.cellId">
          <button @click="setActive(col)" :class="{ active: selectedCell === col }">{{col.text}}</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>