前提・実現したいこと
- Vue.jsと、UIフレームワークのVuetifyを使ってアプリを作成中。
- テーブルの内容を動的に書き換えたい(情報を追加したい)が、うまくいかない。
発生している問題・エラーメッセージ
このテーブルに、
「ぶどう 750」を動的に追加したいのですが、できません。
該当のソースコード
javascript
<template> <div> <v-card> <v-card-title> くだもの <v-spacer></v-spacer> <v-text-field v-model="search" append-icon="mdi-magnify" label="検索" single-line hide-details> </v-text-field> </v-card-title> <v-data-table :headers="headers" :items="items" hide-default-footer :search="search"> <template v-slot:[`item.action`]="{ item }"> <v-btn @click="onClickShow(item)">編集</v-btn> <v-btn @click="onClickShow(item)">削除</v-btn> </template> </v-data-table> </v-card> </div> </template> <script> export default ({ data() { return { valid: null, rules: { required: (v) => !!v || "必須", }, value: {}, types: null, search: '', headers: [{ text: "名称", value: "name" }, { text: "金額", value: "price" }, { text: "操作", value: "action" }, ], items: [ { name: "リンゴ", price: 110 }, { name: "バナナ", price: 230 }, { name: "オレンジ", price: 350 }, ], } }, methods: { onClickShow(item) { console.log(`${item.name}:${item.price}`); }, }, mounted() { this.items.push=({name:'ぶどう', price: 750}) console.log(this.items) }, }) </script>
試したこと
mounted()
内のconsole.log(this.items)
の結果を見る限り、追加処理自体はできているように見えます。
しかし、フロント側のテーブルには反映されません。
mounted()
内に書くことがよくないのかと思い、
メソッド化してボタンから実行してみるなども試しましたが、結果は同じでした。
おそらく実行順序の問題のような気がするのですが、
何かいい方法はないでしょうか。
知恵を貸していただきたいです。
補足情報(FW/ツールのバージョンなど)
Vue2
まだ回答がついていません
会員登録して回答してみよう