Vue.jsで更新した変数でリレンダーされない

Question

失礼しました。質問文が消えていました。

前提・実現したいこと

Vueの勉強のため、Excelの「課題管理シート」のWeb化を行っています。

1. 最上の「＋」ボタンクリックで、空の「課題」行を下に追加。
2. 各行の「＋」ボタンクリックで、空の「課題」行がなければ、「No.Xの関連課題」というリンクを持つ「課題」行を追加。
3. 各行の「＋」ボタンクリックで、空の「課題」行があれば、最上の空の「課題」行に「No.Xの関連課題」というリンクを挿入。

発生している問題・エラーメッセージ

1.と2.ができるものの、3.でリンクが描画されません。
ネット記事で「spliceなどを使えばリレンダーされる」とのことですが、リレンダーされません。
どうぞご教授お願い致します。

試したこと

this.$set(this.tasks, index, task);

補足情報（FW/ツールのバージョンなど）

@vue/cli 4.2.2

<template>
  <div id="app">
    <div class="buttonBox">
      <button class="buttonColor addTask" @click="addTask">＋</button>
    </div>
    <table border="1" class="taskSheet">
     <thead>
        <tr>
          <th class="editingColumn">編集</th>
          <th rowspan="2">No.</th>
          <th colspan="2">課題</th>
        </tr>
        <tr>
          <th class=" editingColumn">関連課題</th>
          <th>概要</th>
          <th>詳細</th>
        </tr>
      </thead>
      <tbody>
        <TaskRow v-for="(task, index) in tasks" 
          :key="index"
          :index="index"
          :numero_="task.numero" 
          :relatedTo_="task.relatedTo"
          @addTaskRelatedTo="addTaskRelatedTo" />
      </tbody>  
    </table>
  </div>
</template>

<script>
import TaskRow from './components/TaskRow.vue'

export default {
  name: 'App',
  components: {
    TaskRow
  },
  data () { 
      return {
        dirty: false,
        newTask: JSON.stringify({ numero: 0, relatedTo: 0 }),
        tasks: [
          { numero: 5, relatedTo: 0
          },
          { numero: 0, relatedTo: 0
          }
        ]
      }
    },
    computed: {
    },
    methods: {
      firstEmptyTaskIndex: function() {
        for (let i = 0; i < this.tasks.length; i++) {
          if (this.isEmpty(i)) {
            return i;
          }
        }
        return -1;
      },
      isEmpty: function(index) {
        const task = this.tasks[index];
        return task.numero <= 0 && task.relatedTo <= 0;
      },
      addTask: function() {
        this.tasks.push(JSON.parse(this.newTask));
        this.dirty = true;
        return this.tasks.length - 1;
      },
      addTaskRelatedTo: function(relatedToNumero) {
        let index = this.firstEmptyTaskIndex();
        if (index >= 0) {
          let task = JSON.parse(this.newTask);
          task.relatedTo = relatedToNumero;　// これが反映されない
          this.tasks.splice(this.index, 1, task);
        }
        else {
          index = this.addTask();
          this.tasks[index].relatedTo = relatedToNumero; // これは反映される
        }
        this.dirty = true;
        return index;
      }
    }
  }
</script>

<style>
</style>

<template>
    <tr>
      <!-- 関連課題追加 -->
      <td>
        <button class="buttonColor addTaskRelatedTo" @click="$emit('addTaskRelatedTo', numero)">＋</button>
      </td>

      <!-- No. -->
      <td class="numero rightAlignedCell">
        <a :name="'No.' + numero" v-if="numero > 0">{{numero | positiveOnly}}</a>
      </td>

     <!-- 概要 -->
      <td>
        <a v-if="relatedTo > 0" :href="'#No.' + relatedTo">No.{{relatedTo}}の関連課題</a>
        <br v-if="relatedTo > 0">
        <input type="text" />
      </td>
  
      <!-- 詳細 -->
      <td>
      </td>
  
    </tr>
 </template>

<script>
export default {
  name: 'taskRow',
  props: {
    index: Number,
    numero_: Number,
    relatedTo_: Number,
  },
  filters: {
    positiveOnly: (n) => {
      return (n <= 0 ? '' : n);
    }
  },
  data() {
    return {
      numero: this.numero_,
      relatedTo: this.relatedTo_
    }
  },

}
</script>
<style>
</style>

Answer 1

ありがとうございます。
$nextTick()を使うことで解決できました。

          let task = JSON.parse(this.newTask);
          task.relatedTo = relatedToNumero;
          this.tasks.splice(index, 1, task);

↓

          let task = JSON.parse(this.newTask);
          task.relatedTo = relatedToNumero;
          this.tasks.splice(index, 1);
          this.$nextTick(() => {
            this.tasks.push(task);
          });

Answer 2

spliceを使うと、そのIndexの入れ替えや削除になります。
課題の「追加」をしたい場合には、pushしてあげたら動くと思います

×this.tasks.splice(index, 1, task)
○this.tasks.push(task)

【補足】

直接関係ないんですが、addTaskRelatedTo()の中にindex変数を作ってあげているので、
indexを呼ぶ時にはthisはつけなくて大丈夫です。
thisで変数を呼ぶのはdata(){return }内の変数を呼ぶ時です。

×this.tasks.splice(this.index, 1, task);
○this.tasks.splice(index, 1, task);

Comments

[naomi3]

ご回答ありがとうございます。
3．のケースになるので、同じ位置からの削除と(リンクをつけて)挿入すなわち入れ替えを「.splice(index, 1, task)」で行っています。「this.tasks[index].relatedTo = relatedToNumero;」では動作しなかったので、spliceで入れ替えを行ったつもりですが、変化がありませんね。
【補足】の件は、おっしゃる通りで、質問コードの未修正で、すみませんでした。（反映済みです）