前回のなかで、「メモが書けない 編集ができない」がとりあえず動くようになったので、その報告です。
とった対応策
v-data-table タグ内の修正
props 経由だとどうしてもデータがうまく取れないので
propsの代わりに、v-data-table の各要素「item」を使って以下のように修正しました。
よくわからなかったのが
<tr>タグ
を入れないとちゃんと出なかったこと、
v-data-tableはまだいまいち動作が良くわかりません、、、
でもこれで、１行すべての要素まで出せました。
ダイアログの修正
レッスン記録の１行の一番右の「edit」を押すと、以下のダイアログが表示されます。
こうやって表示するためには以下の修正を行わないと、出ませんでした。
v-textarea や v-btn タグには、現在のvuetifyの定義ではエラーとなる書き方があったようで、エラー情報をもとに正しい書き方に修正しました。
これで上記ダイアログがでます。
というか、ダイアログの定義がv-data-tableよりも先に書いてあったなんて。
そういえば、画面表示されている量と、実際に出ているものがなんか違うな、と思っていましたが、ダイアログ定義がtemplateタグ始まってすぐ書かれていたことに
今回の件でやっと気づきました。
editItemメソッド内の初期値設定や変数定義
ダイアログは無事出たのですが、どうも書くときや、書いた後、再度修正しようとしたとき、さっき入れた値がでなかったり、そもそも登録できなかったりしました。
itemの中にある、先生の名前やメモは、対応する変数から値をthis.teacher this.memo に入れてあげると画面に出るようになりました。
また、id が無いとだめだったので、export defaultのdataのなかにid を追加して
やっと意図した動作ができるようになりました。
全体のソース
<template>
<div>
<v-dialog v-model="dialog" max-width="500px">
<v-card>
<v-card-text>
<v-container grid-list-md>
<v-select v-model="teacher" :items="teachers"
label="講師" required></v-select>
<v-textarea v-model="memo" filled label="メモ"
auto-grow></v-textarea>
</v-container>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text
@click="dialog=false">Cancel</v-btn>
<v-btn color="blue darken-1" text
@click="saveItem">Save</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
<v-container class="mt-5">
<v-select v-model="student" :items="students"
label="氏名" required></v-select>
<v-data-table :headers="headers" :items="selectedRecords"
class="elevation-1">
<template v-slot:item="{item}">
<tr>
<td>{{ item.date}}</td>
<td>{{ item.comment}}</td>
<td>{{ item.teacher}}</td>
<td>{{ item.memo}}</td>
<td>
<v-icon small @click="editItem(item)">edit</v-icon>
</td>
</tr>
</template>
</v-data-table>
</v-container>
</div>
</template>
<script>
let headers = [
{ text: "日付", value: "date" },
{ text: "コメント", value: "comment" },
{ text: "講師", value: "teacher" },
{ text: "メモ", value: "memo" },
{ text: "編集", value: "" }
];
export default {
props: ["records", "students", "teachers"],
data() {
return {
headers: headers,
dialog: false,
student: "",
teacher: "",
memo: "",
id:"",
item: null
};
},
computed: {
selectedRecords() {
return this.records.filter(r => {
return r.student == this.student;
});
}
},
methods: {
editItem(item) {
this.id = item.id;
this.teacher = item.teacher;
this.memo = item.memo;
this.dialog = true;
},
saveItem() {
this.$emit("updaterecord", {
id: this.id,
teacher: this.teacher,
memo: this.memo
});
this.dialog = false;
}
}
};
</script>
まとめ
つかれた、、、
多分この本が出版されたときには問題なく動いていたと思いますが、
vuetifyのバージョンが上がって、動かなくなってしまったのではないかと思います。
仕事で使うときは注意しないとハマりそう、、、
