質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

push関数を使って配列の中にオブジェクトを追加したい。追加後の配列を読み込んでテーブルを作成したい。

bokupiroki
bokupiroki

総合スコア53

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

221閲覧

投稿2022/01/27 09:42

前提・実現したいこと

  • 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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuetify.js

Vuetify.jsは、マテリアルデザインを基本とするVue.jsのCSSフレームワークです。多くのマテリアルデザインのコンポーネントを提供しており、あらゆるアプリケーションに対応可能。vue-cli用テンプレートがあり、簡単にページを作成できます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。